每天一點點之 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和小程序）