為react元素添加事件處理函數(shù)的方法：

一、在類中有三種方法：

1. 在構(gòu)造函數(shù)中用bind

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

    // 為了在回調(diào)中使用 `this`，這個(gè)綁定是必不可少的
    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. 用箭頭函數(shù)的方式

class LoggingButton extends React.Component {
  // 此語法確保 `handleClick` 內(nèi)的 `this` 已被綁定。
  // 注意: 這是 *實(shí)驗(yàn)性* 語法。
  handleClick = () => {
    console.log('this is:', this);
  }

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

3. 在回調(diào)中使用[箭頭函數(shù)

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

  render() {
    // 此語法確保 `handleClick` 內(nèi)的 `this` 已被綁定。
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

以上三種方法個(gè)人覺得使用第二種方法比較好。

react元素事件函數(shù)傳遞參數(shù)的方式

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

這里的e是事件對(duì)象，包含事件相關(guān)信息。具體見https://react.docschina.org/docs/events.html

react元素自帶多個(gè)事件處理函數(shù)

詳見https://react.docschina.org/docs/events.html

這里面要提一下onScroll事件函數(shù)，這個(gè)事件函數(shù)只對(duì)跟組件有效，因?yàn)閟croll只是根組件發(fā)生了滾動(dòng)，其他子組件相對(duì)于根組件都沒有發(fā)生變化。