每天一点点之 taro 框架开发 - 事件处理与样式表
1.方法调用
state = { name:'张三' } test(){ this.state.name } <button onClick={ this.test.bind(this) } />
调用的时候需要在方法前加上on,如果方法中有需要调用当前页的this,需要绑定this。
还可以通过闭包函数(箭头函数)调用
state = {name:'张三'} test(){ console.log('test) } <button onClick={ ()=>{console.log(this.state.name)} } />
需要注意:这种方法在h5可以使用,但不适用小程序
2.事件
taro事件采用驼峰命名
通过 this.test.bind(this) 添加的事件,在方法的参数中自带event参数,代码如下:
test(event){ console.log(event) } render () { return ( <View className='index'> <Button onClick={this.test.bind(this)}>测试事件</Button> </View> ) }
在被调用的方法中可以通过 event.stopPropagation(); 来阻止事件冒泡
在 bind() 中传递参数,不管参数位置如何,在方法中通过arguments接受到的参数event事件在最后
3.环境变量
process.env.TARO_ENV
环境期变量,也就是说只在开发期使用
应用如下:
const isH5 = process.env.TARO_ENV == "h5"; if(isH5){ require('./h5.less'); }else{ require('./weapp.less') }
4.样式注意事项
- 错误操作
-
- #id {}
- div span {}
- span[class='name']
- .a > .b {} 不一定生效
- 正确操作
-
- 类选择器 必须定义className
- 自定义组件 只对当前组件生效
- flex布局(h5和小程序)