javascript - React 类组件中的“This”

Question

你能解释一下为什么我们需要在 React 类组件中我们自己声明的方法中绑定“this”吗？我明白“this”的价值取决于使用“this”的环境。然而，在下面的代码中，我们有 3 个方法——constructor()、changeText() 和 render()。为什么“this”在构造函数（）和渲染（）中工作得很好，但在我自己的方法中不起作用——changeText（），除非我绑定它？看了很多关于“this”的文章，还是不明白为什么我们自己的方法要绑定到“this”……</p>

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      text: "Change Text",
    };
    this.changeText = this.changeText.bind(this);
  }

  changeText() {
    this.setState({
      text: "Text Changed",
    });
  }

  render() {
    return (
      <div>
        <div>
          <h3>{this.state.text}</h3>
          <button onClick={this.changeText}>Click Me</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

标签： javascriptreactjsfunctionthisbind