React 事件处理

(1)React事件的命名采用小驼峰式(camelCase), 而不是纯小写.

(2)使用JSX语法时你需要传入一个函数作为事件处理函数, 而不是一个字符串.

传统的HTML

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

在React中

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

在React中另一个不同点是你不能通过返回false的方式阻止默认行为. 你必须显示的使用preventDefault.例如:

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

在React中, 可能是这样的:

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

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

当你使用ES6 class语法定义一个组件的时候, 通常的做法是将事件处理函数声明为class中的方法.

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

在JavaScript中, class的方法默认不会绑定this. 如果觉得使用bind很麻烦, 有两种方式可以解决:

(1) 使用实验性的public class field语法

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

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

(2) 回调中使用箭头函数

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

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

此语法的问题在于每次渲染LoggingButton时都会创建不同的回调函数. 在大多数情况下, 这没什么问题, 但如果该回调函数作为prop传入子组件时, 这些组件可能会进行额外的重新渲染.

向事件处理程序传递参数

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

上述两种方式是等价的, 在这两种情况下, React的事件对象e会作为第二个参数传递. 如果通过箭头函数的方式, 事件对象必须显示的进行传递, 而通过bind的方式, 事件对象以及更多的参数将隐式的进行传递.