I'm having a hard time understanding how this
works inside an onClick
function. I made a small CodePen
example here.
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>
</>
)
}
I realize this
context is call-site specific, and it rebinds to the onClick
function and thus the context i need to make it work is lost. But i don't know how to fix that. I realize i could use lambda
syntax or refactor the object another way that avoids this
completely, but that would just be dodging the problem.
Anyone able to provide a solution and a quick answer of what is really going on?