Reactjs入门官方文档(五)【handling-events】

事件处理

译自reactjs官方文档

React elements中的事件处理与DOM元素中的时间处理十分相似, 只有些语法上的区别:
* React事件使用驼峰命名,而不是小写.
* 使用JSX时事件处理传递一个函数而不是HTML中的字符串
例如, html中:

<button onclick="activateLasers()">
  Activate Lasers
</button>

而在JSX中稍有不同:

<button onClick={activateLasers}>
  Activate Lasers
</button>

另一个不同是你不可以在React中返回false告诉以阻止事件的默认行为, 必须显式调用preventDefault. 例如html中为了组织默认的超链接的打开一个新页面的默认行为, 你可以这样做:

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click merrf
</a>

而在React中, 应该是这个样子:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

其中e是一个React合成的事件, React参照W3C标准封装了这些事件, 所以你不必担心跨浏览器的适配性.

使用React时, 通常不需要通过addEventListener在创建DOM元素后去为其添加监听, 而只要在render时提供一个监听即可.

当你使用ES6 class定义一个对象时, 事件处理器通常作为这个类中的一个方法. 例如: 下面的Toggle对象描述了一个在”ON”和”OFF”之间切换的按钮.

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

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

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

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

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

在使用JSX回调时, 你必须注意this的含义. Javascript中, 对象方法中的this默认没有绑定到对象本身, 如果你忘记了this.handleClick = this.handleClick.bind(this);, handleClick中的this将会是undefined.

这并不是React下的特定行为, 而是javascript的一部分, 通常情况下, 如果你引用了一个方法而未在之后使用()调用时, 比如`onClick={this.handleClick}, 应当对这个方法进行绑定.

如果你不喜欢这种绑定方式, 有两种办法绕开它.
* 如果在使用property initializer syntax, 你可以作如下修改:

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

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

这种预防在Create React App默认开启.

• 如果你没有使用property initializer syntax, 可以在回调处使用箭头函数(arrow function):

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

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

这种方法的一个问题在于每次渲染时都会创建一个新的回调函数. 大部分情况下这都没问题, 然而如果这个回调作为prop传递给底层对象时, 这些对象需要进行额外的重新渲染. 我们建议在构造方法中进行绑定或者使用property initializer syntax, 以避免这种性能问题.