taro 事件處理

• https://nervjs.github.io/taro/docs/event.html

Taro 元素的事件處理和 DOM 元素的很相似。但是有一點語法上的不同:

Taro 事件綁定屬性的命名采用駝峰式寫法，而不是小寫。 如果采用 JSX 的語法你需要傳入一個函數作為事件處理函數，而不是一個字符串 (DOM 元素的寫法)。 例如，傳統的微信小程序模板：

<button onclick="activateLasers">
  Activate Lasers
</button>

Taro 中稍稍有點不同：

<button onClick={this.activateLasers}>
  Activate Lasers
</button>

在 Taro 中另一個不同是你不能使用 catchEvent 的方式阻止事件冒泡。你必須明確的使用 stopPropagation。例如，阻止事件冒泡你可以這樣寫：

class Toggle extends React.Component {
  constructor (props) {
    super(props)
    this.state = {isToggleOn: true}
  }

  onClick = (e) => {
    e.stopPropagation()
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }))
  }

  render () {
    return (
      <button onClick={this.onClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    )
  }
}

向事件處理程序傳遞參數

通常我們會為事件處理程序傳遞額外的參數。例如，若是 id 是你要刪除那一行的 id，以下兩種方式都可以向事件處理程序傳遞參數：

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

當你通過 bind 方式向監聽函數傳參，在類組件中定義的監聽函數，事件對象 e 要排在所傳遞參數的后面。

class Popper extends Component {
  constructor () {
    super(...arguments)
    this.state = { name:'Hello world!' }
  }

  // 你可以通過 bind 傳入多個參數
  preventPop (name, test, e) {    //事件對象 e 要放在最后
    e.preventDefault()
  }

  render () {
    return <Button onClick={this.preventPop.bind(this, this.state.name, 'test')}></Button>
  }
}

Taro 目前暫時不支持通過匿名函數傳值，也不支持多層 lambda 嵌套。當你有傳參需求時，請全部使用 bind 來處理。

任何組件的事件傳遞都要以 on 開頭

在 Taro 中，事件參數(props)都以 on 開頭
只要當 JSX 組件傳入的參數是函數，參數名就必須以 on 開頭：

// 正確
const element = <View onClick={this.onTag} />
const element2 = <Input onFocus={this.onFocus} />
const element3 = <CustomElement onAnimationEnd={this.props.onAnimationEnd} />