React 处理事件

2017-12-26 本文已影响251人天天luck

用 React 元素处理事件和在DOM元素里处理事件非常相似。有一些语法差异：

React 事件使用驼峰式命名，而不是小写
用JSX，你能传递函数作为事件处理器，而不是一个字符串

HTML:

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

React:

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

另外一个区别，在 React 中，不能用 return false 阻止默认行为。必须直接调用 preventDefault 例如，用纯HTML，为了防止打开新页面的默认链接行为，可以这样：

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

这里的 e 是一个合成事件，React 根据 W3C spec 定义这些合成事件，所以不需要担心浏览器的兼容性。

备注：合成事件--是一个跨浏览器原生事件包装器，它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() ，除了原生事件在所有浏览器中，他们工作方式都相同。

当使用 React 时，通常不需要调用 addEventListener 对创建后的DOM元素添加监听器。相反，当元素最初被渲染时，仅需提供一个监听器。

当使用 ES6 class 定义一个组件，一个常见的模式是一个事件处理器在类中是一个方法。例如，toggle 组件渲染让用户在 ON 和 OFF 之间切换的按钮：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    
    // 此绑定是必需的，让 `this` 在回调里生效
    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')
);

demo

在JSX回调中，你必须注意 this 的指向。在 Javascript中，类方法没有被默认绑定。如果你没有绑定 this.handleClick 并把它传递到 onClick，则函数被实际调用时，this 将会是 undefined。

这不是 React 特有的行为；这是Javascript中函数如何工作的一部份，通常，如果在它后面提供一个没有 () 方法，像onClick={this.handleClick}，你就应该绑定（ bind）该方法。

如果你不想调用 bind ，有两种方式能解决它。如果使用试验性 public class fields syntax，可以用类字段正确的绑定回调：

class LoggingButton extends React.Component {
  // 这个语法确保 `this` 被绑定在handleClick中
  // 警告: 这是 *试验性* 语法
  handleClick = () => {
    console.log('this is:', this);
  }

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

此语法在创建 React APP 中是默认开启的。

如果不用类字段语法，也可以在回调中庸一个箭头函数：

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

  render() {
    // 这个语法确保 `this` 被绑定在handleClick中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

这个语法的问题是每次 LoggingButton 渲染时都会创建一个不同的回调。大多数情况下，这没问题。但是，如果回调被当作 prop 传递给子组件，这些组件可能做额外重复渲染。我们通常推荐绑定在构造函数中或者使用类字段语法，避免这种性能问题。

将实参传递给事件处理器

在循环内部，通常想把额外的形参传递给事件处理器。列如，如果 id 是行ID，以下二者都可以工作：

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

上面二行是等价的，使用箭头函数和 Function.prototype.bind

在这两者情况下，e 实参表示 React 事件将作为ID后第二个实参传递。使用箭头函数，我们必须传递它，但是用 bind 绑定的任何的参数会被自动的转发。

React 处理事件

将实参传递给事件处理器

猜你喜欢

热点阅读