用户登录

Taro UI 里的一些组件都支持一些属性还有事件,这个 AtSearchBar 组件,搜索栏里的值,是 value 属性设置的 .. 可以用一个 this.state.value ,使用组件里的 value 这个 state .. 搜索栏里的值有变化会触发执行 onChange 事件 ..

处理这个事件,可以添加一个 onChange 属性 .. 值可以是 this.onChange,再 bind 一个 this 给这个方法 ..

搜索栏上默认还有个动作按钮 .. 按了这个按钮会执行 onActionClick .. 添加一个 onActionClick .. 用一下 this.onActionClick .. bind .. this ..

在组件里面 .. 添加一个 state .. 它是一个对象 ..里面可以添加一个 value 属性 .. 它的值就是在搜索栏里输入的值 ..

再添加一个 onChange 方法 .. 它有个 value 属性,表示当前更新的值 .. 方法里用一下 this.setState 设置一下组件的状态 .. 把组件里的 value 的值设置成更新的值,这里它也叫 value .. 所以可以直接用一个 value ..

下面再添加一个 onActionClick .. 点击搜索栏上的动作按钮会执行这个方法 .. 暂时让它先在控制台上输出点文字 .. console.log .. 输出 .. 搜索 .. 后面再加上组件里的 value 这个 state 的值 ..

使用搜索栏的时候,如果按了手机键盘上的完成,会触发 onConfirm .. 复制一下 onActionClick .. 方法的名字换成 onConfirm ..

到模拟器上试一下 .. 在搜索栏里输入点内容 .. 然后按一下 搜索 这个动作按钮 .. 在控制台上会输出组件里的 value 这个 state 的值 ..

搜索栏的属性与事件《 电商小程序案例:页面结构 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点