了解 onClick 处理程序中的"this"上下文

Question

我很难理解this如何在onClick函数中工作。我在这里做了一个小CodePen的例子。

const history = {
init() {
this.counter = 0
return this;
},
increment() {
this.counter++;
}
}
const a = Object.create(history).init()
const MyComponent = () => {
a.increment();
// a's context is lost in the onClick function, how to
// make this work?
return (
<>
<button onClick={a.increment}>
click to increment
</button>
<p>{a.counter}</p>
</>
)
}

我意识到this上下文是特定于调用站点的，并且它重新绑定到onClick函数，因此我使其工作所需的上下文丢失了。但我不知道如何解决这个问题。我意识到我可以使用lambda语法或重构对象，以另一种完全避免this的方式，但这只会回避问题。

有人能够提供解决方案并快速回答到底发生了什么吗？

Answer 1

您可以使用bind函数在增量函数中设置this值。您还需要更新组件的状态以重新渲染它。

法典

const history = {
init() {
this.counter = 0;
return this;
}, 
increment(setCounter) {
setCounter(++this.counter);
}
}
const a = Object.create(history).init();
const MyComponent = () => {
const [counter, setCounter] = useState(a.counter);  
return (
<>
<button onClick={a.increment.bind(a, setCounter)}>
click to increment
</button>
<p>{a.counter}</p>
</>
)
};

查看工作示例