Question

为什么使用 React 时事件处理程序回调中 this 的值不同？

比如在JS中给一个元素添加事件处理程序时，回调函数中this的值始终是放置处理程序的元素（假设箭头函数不用于回调）。所以，我们有这个：

button.onclick = function(event) {
  alert(this); // [object HTMLButtonElement]
}

但是，如果我在 React 中做同样的事情：

<button onClick={function() {
  alert(this); // undefined
  }
}>
</button>

... 如您所见，this 指的是 undefined 而不是按钮元素。

这可能是“JSX 回调”的含义吗？它只是一个 React 的东西吗？

Answer 1

是的，这是反应的东西。如果你想获取按钮元素，请这样做：

<button onClick={function(e) {
  alert(e.target);
  }
}>
</button>

Answer 2

React.Component 不会自动将方法绑定到自身。您需要自己在构造函数中绑定它们。如果使用箭头函数，则不需要绑定，因为它的上下文是相同的。

constructor(props) {
  super(props);
  
  this.state = {
    loopActive: false,
    shuffleActive: false,
  };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);
}

使用 React 事件处理程序时的 this 关键字值

2 个答案: