react事件处理函数及事件

为react元素添加事件处理函数的方法：

一、在类中有三种方法：

1. 在构造函数中用bind

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')
);

2. 用箭头函数的方式

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

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

3. 在回调中使用[箭头函数

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

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

以上三种方法个人觉得使用第二种方法比较好。

react元素事件函数传递参数的方式

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

这里的e是事件对象，包含事件相关信息。具体见https://react.docschina.org/docs/events.html

react元素自带多个事件处理函数

详见https://react.docschina.org/docs/events.html

这里面要提一下onScroll事件函数，这个事件函数只对跟组件有效，因为scroll只是根组件发生了滚动，其他子组件相对于根组件都没有发生变化。