How does event handlers with arrow functions achieve context binding

Question

I know about the general theory of this binding (function call site what matters, implicit, explicit binding, etc...) and the methods to solving the problem of

Answer 1

When the render code is executed, this refers to the component class, so it is able to reference the correct function. This means that element.onClick points to the goToStore method.

When that function is called in the browser, it's called from the context of the html element (i.e. element.onClick()). So unless the goToStore method is bound to the context of the component class, it will inherit this from the context of the element.

This answer provides some more relevant information and further reading.