React - 事件处理

拼搏现实的明天。 2022-07-10 04:55 188阅读 0赞

类似于DOM事件处理，有几点不同之处：

*  React的事件名字是首字母小写的驼峰式写法，而不是小写的。
 *  在JSX里面，事件处理器是一个函数，而不是一个字符串。

例子，HTML：

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

React:

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

*  在React里面，不能通过返回`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> ); }

使用React不需要再DOM创建之后给事件添加监听器，仅需在渲染的时候提供监听器即可。

用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`：

在js里面，类方法默认是没有绑定（[bound][]）的，加入你忘记了绑定`this.handleClick`，然后把它传给`onClick`，当函数被调用的时候，`this`将会是`undefined`。

这不是React的特有行为，可以参考这篇[文章][Link 1]。 通常，在使用方法的时候，后面没有加`()`，例如`onClick={this.handleClick}`，这时你就要绑定这个方法。

如果你不想调用`bind`，还是有两种方法可以绕过的。

第一种是使用实验性的属性初始化语法（property initializer syntax），用属性初始化来绑定回调函数：

class LoggingButton extends React.Component {
      // This syntax ensures `this` is bound within handleClick.
      // Warning: this is *experimental* syntax.
      // 确保'this'和handleClick绑定，这还是实验性的语法
      handleClick = () => {
        console.log('this is:', this);
      }
    
      render() {
        return (
          <button onClick={ this.handleClick}> Click me </button>
        );
      }
    }

这个语法在React里面是默认可用的。

第二种方法是使用箭头函数（[arrow function][]）。

class LoggingButton extends React.Component {
      handleClick() {
        console.log('this is:', this);
      }
    
      render() {
        // This syntax ensures `this` is bound within handleClick
        // 确保'this'和handleClick绑定
        return (
          <button onClick={(e) => this.handleClick(e)}> Click me </button>
        );
      }
    }

这种语法的问题是，每次渲染`LoggingButton`的时候，都会创建不同的回调函数。 大部分情况下，这是没有问题的。但是，如果这个回调函数是作为一个`prop`传递给下层组件的话，这些组件会重复渲染。 通常的推荐方法是在`constructor`里面绑定，以避免这种性能问题。

> 参考链接：
> 
> 1.  React Doc：[handling events][]

[bound]: https://developer.mozilla.org/zh_CN/docs/Web/JavaScript/Reference/Global_objects/Function/bind
[Link 1]: http://blog.jobbole.com/58032/
[arrow function]: https://developer.mozilla.org/zh_CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
[handling events]: https://facebook.github.io/react/docs/handling-events.html