javascript - 在 React 中将事件处理程序放置在匿名函数中如何解决绑定(bind)问题？

Question

了解 handling events in React ，其他人可以在下面的两种情况下如何绑定(bind)吗？如果可以用this.handleClick引用handleClick，为什么还需要绑定(bind)呢？处理程序中的 this 不会已经指向组件，因为它是调用处理程序的组件吗？另外，为什么将处理程序放在匿名函数中也有效？

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

解决方案是这样的:

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

但为什么这也有效？

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

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

Answer 1

因为箭头函数(在您的情况下是这样的:(e) => this.handleClick(e))会自动为您“绑定(bind)”this，即使您不会在函数上调用 bind(this) 。所以在这里:

<button onClick={(e) => this.handleClick(e)}>
    Click me
</button>

匿名函数会自动获得正确的封闭上下文(在您的情况下为 LoginButton 组件)，并且它具有 handleClick 方法。这就是它的工作方式。

这样你也可以把 this.handleClick = this.handleClick.bind(this); 变成像这样的箭头函数 this.handleClick = () => this。 handleClick; 并得到相同的结果。

看here详细解释:

An arrow function does not create its own this context, so this has the original meaning from the enclosing context.