React中的事件绑定

在react中，你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

1.在构造函数中绑定this或者在调用时绑定this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
      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')
      );
    </script>
  </body>
</html>

在调用时绑定this，事件对象以及更多的参数将会被隐式的进行传递

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
      class Toggle extends React.Component {
        constructor(props) {
          super(props);
          this.state = {isToggleOn: true};
 
          // 这个绑定是必要的，使`this`在回调中起作用
          //this.handleClick = this.handleClick.bind(this);
        }
 
        handleClick(e) {
          e.preventDefault();
          this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
          }));
        }
 
        render() {
          return (
            <button onClick={this.handleClick.bind(this)}>
              {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
          );
        }
      }
 
      ReactDOM.render(
        <Toggle />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

2.属性初始化器语法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
      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')
      );
    </script>
  </body>
</html>

3.在回调函数中使用箭头函数（）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
      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={ (e) => this.handleClick(e) }>
              {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
          );
        }
      }
 
      ReactDOM.render(
        <Toggle />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

React中的事件绑定

相关推荐