为什么使用 React 时事件处理程序回调中 this
的值不同?
比如在JS中给一个元素添加事件处理程序时,回调函数中this
的值始终是放置处理程序的元素(假设箭头函数不用于回调)。所以,我们有这个:
button.onclick = function(event) {
alert(this); // [object HTMLButtonElement]
}
但是,如果我在 React 中做同样的事情:
<button onClick={function() {
alert(this); // undefined
}
}>
</button>
... 如您所见,this
指的是 undefined
而不是按钮元素。
这可能是“JSX 回调”的含义吗?它只是一个 React 的东西吗?
答案 0 :(得分:2)
是的,这是反应的东西。如果你想获取按钮元素,请这样做:
<button onClick={function(e) {
alert(e.target);
}
}>
</button>
答案 1 :(得分:0)
React.Component
不会自动将方法绑定到自身。您需要自己在构造函数中绑定它们。如果使用箭头函数,则不需要绑定,因为它的上下文是相同的。
constructor(props) {
super(props);
this.state = {
loopActive: false,
shuffleActive: false,
};
this.onToggleLoop = this.onToggleLoop.bind(this);
}