时间戳

首页 > 解决方案 > 为什么在 React 中使用事件时需要绑定

javascript - 为什么在 React 中使用事件时需要绑定

问题描述

this.handleClick = this.handleClick.bind(this);有人可以向我解释为什么我在使用事件时需要使用绑定吗？

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(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

为什么要定义“this”的值？

class Person {
    constructor(name, yearOfBirth) {
        this.name = name;
        this.yearOfBirth = yearOfBirth;
    }

    calculateAge() {
        console.log(this);
    }
}

const john = new Person('John', 1993);
john.calculateAge();

但是单击时'this'的值是未定义的？

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

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

ReactDOM.render(
    <ActionLink />,
    document.getElementById('root')
);

标签： javascriptreactjs

解决方案

this总是在调用函数的上下文中执行。

因此，当 React 组件呈现时，元素和事件处理程序将附加到 DOM 并在 DOM 的上下文中执行。所以如果你不将方法绑定到组件，你就不能this在方法内部使用。

// this will be window and window.setState will be undefinedd
this.setState(state => ({
  isToggleOn: !state.isToggleOn
}));

当您将方法绑定到组件时，this将在组件的上下文中执行，您将能够调用.setState.

有趣的是，如果您的方法不使用任何this调用，即使您不绑定也不会有任何问题。

正如quirimmo在评论中指出的那样，在严格模式下，这将是undefined默认情况下，即使没有明确指定，ES6 类也会默认在严格模式下执行。这就是为什么this如果undefined不绑定到类的话。

推荐阅读