React 事件

事件绑定的方法

① 在constructor 中 手动绑定

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

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

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

② 使用实验性属性

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

③ 在回调中使用箭头函数

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

④ 使用函数的bind方式绑定

class LoggingButton extends React.Component {
  handleClick(info) {
  // 这种方式传递的参数，e会作为第二个参数隐形的传入
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={this.handleClick.bind(this,info)}>
        Click me
      </button>
    );
  }
}

使用箭头函数的时候考虑一个情况就是：如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染

向事件处理函数中传递参数

①通过箭头函数方式传递参数，e需要显示的作为参数传递给处理函数
②通过函数的bind方式传递函数，e会默认作为第二个参数传递给处理函数

deleteRow(id, e?) {
   console.log(e)
   console.log('删除' + id)
}
<button onClick={this.deleteRow.bind(this, 2)} data-id="buttons">使用函数bind方式删除一行</button>
<button onClick={(e) => { this.deleteRow(3, e) }} data-id="buttons">使用回调中加入箭头函数方式删除一行</button>