[Taro入门：7] 事件处理

这是我参与更文挑战的第4天，活动详情查看：更文挑战

Taro 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

• 事件的命名采用小驼峰式（camelCase），而不是纯小写。(与React一致)
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。(与React一致)
• 任意组件的事件传递要以on开头。
• 不能使用 catchEvent 的方式阻止事件冒泡。你必须明确的使用 stopPropagation。

一、事件处理函数的this指向

import { Component } from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default class Index extends Component {
  constructor(props){
    super(props)
    this.state = {
      name:"Taro"
    }
  }
  sayHello(){
    console.log('this=>',this)
    Taro.showToast({
      title: "Hello " +  this.state.name + " !"
    })
  }
  render() {
    return (
      <View>
           <Button onClick={ this.sayHello }>
           Say Hello
           </Button> 
      </View>
    )
  }
}

上述代码，当点击按钮时，执行sayHello方法，预期弹框显示Hello Taro !。 但实际上并没有弹框出现，控制台打印：

问题在于sayHello方法中this的指向不符合预期。

1.1 通过Function.prototype.bind绑定事件处理函数的this指向

通过bind方法显示绑定this指向：

  render() {
    return (
      <View>
           <Button onClick={ this.sayHello.bind(this) }>
               Say Hello
           </Button> 
      </View>
    )
  }

此时再点击按钮，可正常显示toast：

1.2 通过箭头函数绑定this指向

render() {
    return (
      <View>
           <Button onClick={ ()=> this.sayHello() }>
           Say Hello
           </Button> 
      </View>
    )
  }

点击后，也可以正常显示Toast

二、参数传递

2.1 默认参数 event

事件处理函数默认会传递一个event参数

import { Component } from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default class Index extends Component {
  sayHello(){
    // 打印所有参数
    console.log(arguments)
  }
  render() {
    return (
      <View>
           <Button onClick={ this.sayHello.bind(this) }>
            Say Hello
           </Button> 
      </View>
    )
  }
}

点击按钮后，查看控制台： 一般我们会通过event.target判断点击的元素和获取该元素的一些属性。

2.2 传递自定义参数

除了默认参数，还可以自行传递其他参数：

export default class Index extends Component {
  sayHello(date,weather){
    console.log(arguments)
    Taro.showToast({
      title: date + ' ' + weather
    })
  }
  render() {
    let date = new Date().toLocaleDateString()
    let weather = 'rain'
    return (
      <View>
           <Button onClick={ this.sayHello.bind(this,date,weather) }>
            Say Hello
           </Button> 
      </View>
    )
  }
}

可以看到：自定义传递了2个参数date和weather，默认参数event作为第3个参数(最后一个)传递