Question

有人可以向我解释为什么在使用事件时为什么需要使用绑定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')
);

Answer 1

this始终在调用函数的上下文中执行。

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

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

将方法绑定到Component时，this将在Component的上下文中执行，并且您将能够调用.setState。

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

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

Answer 2

正是由于这个原因，在您发布的代码段中未定义此定义，

首先，您要问为什么需要该功能才能正常工作，因为您正试图将组件“ this”调用为set状态。为此，您只需将其与组件构造函数绑定，以便在调用该函数时定义“ this”并将其设置为组件“ this”。

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

2 个答案: