React （3） -- Handling Events

最新推荐文章于 2024-10-17 23:04:21 发布

转载最新推荐文章于 2024-10-17 23:04:21 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xmyun/p/6963096.html

本文介绍了如何在React中处理事件，包括事件命名、事件处理函数的绑定方式及如何阻止默认行为等关键概念。通过示例展示了如何使用合成事件以及如何在类组件中绑定事件处理程序。

原文地址：https://facebook.github.io/react/docs/handling-events.html

使用React元素处理事件与处理DOM元素上的事件非常相似。有一些句法差异：

反应事件使用camelCase命名，而不是小写。
使用JSX，您可以传递一个函数作为事件处理程序，而不是一个字符串。
不能用return false来阻止React中的默认行为，而是必须显式调用preventDefault。

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

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

在这里，e是一个合成事件。React根据W3C规范定义了这些合成事件，因此您不必担心跨浏览器的兼容性。

当使用React时，您通常不需要调用addEventListener来在创建DOM元素之后添加监听器。而是在元素最初呈现时提供一个监听器。

当您使用ES6类定义组件时，常见的模式是将事件处理程序作为类上的方法。

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

button绑handleClick方法时，是用onClick而不是onclick。

转载于:https://www.cnblogs.com/xmyun/p/6963096.html