事件处理

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

Taro 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串 (DOM元素的写法)。
例如，传统的微信小程序模板：

  1. <button onclick="activateLasers">
  2.   Activate Lasers
  3. </button>

Taro 中稍稍有点不同：

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

在 Taro 中另一个不同是你不能使用 catchEvent 的方式阻止事件冒泡。你必须明确的使用 stopPropagation。例如，阻止事件冒泡你可以这样写：

  1. class Toggle extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {isToggleOn: true};
  5.   }
  7.   onClick = (e) => {
  8.       e.stopPropagation();
  9.     this.setState(prevState => ({
  10.       isToggleOn: !prevState.isToggleOn
  11.     }));
  12.   }
  14.   render() {
  15.     return (
  16.       <button onClick={this.onClick}>
  17.         {this.state.isToggleOn ? 'ON' : 'OFF'}
  18.       </button>
  19.     );
  20.   }
  21. }

向事件处理程序传递参数

通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：

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

当你通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面。

  1. class Popper extends Component{
  2.     constructor(){
  3.         super();
  4.         this.state = {name:'Hello world!'};
  5.     }
  7.     // 你可以通过 bind 传入多个参数
  8.     preventPop(name, test, e){    //事件对象e要放在最后
  9.         e.preventDefault();
  10.     }
  12.     render(){
  13.         return <Button onClick={this.preventPop.bind(this, this.state.name, 'test')}></Button>;
  14.     }
  15. }

Taro 目前暂时不支持通过匿名函数传值，也不支持多层 lambda 嵌套。当你有传参需求时，请全部使用 bind 来处理。

任何组件的事件传递都要以 on 开头

在微信小程序中，可能你会看到像 bindTap 这样的用法，但在 Taro 中，事件参数(props)都以 on 开头:

  1. // 错误
  2. const element = <View bindtap={this.onTag} />
  3. const element2 = <Input bindfocus={this.onFocus} />
  4. const element3 = <CustomElement animationEnd={this.props.onAnimationEnd} />

只要当 JSX 组件传入的参数是函数，参数名就必须以 on 开头：

  1. // 正确
  2. const element = <View onClick={this.onTag} />
  3. const element2 = <Input onFocus={this.onFocus} />
  4. const element3 = <CustomElement onAnimationEnd={this.props.onAnimationEnd} />