In components, I've seen different way of doing callbacks. What is the difference between:
<MyButton onPress={ () => {doSomething(data)} }>
and
<MyButton onPress={ this.doSomething.bind(this) }>
In components, I've seen different way of doing callbacks. What is the difference between:
<MyButton onPress={ () => {doSomething(data)} }>
and
<MyButton onPress={ this.doSomething.bind(this) }>
<MyButton onPress={ () => {doSomething(data)} }>
This code block uses the ES6 Arrow function; which is another way of declaring a function in javascript. Also, the scope of this
in arrow function depend where the function was created as opposed to normal scoping rule of this
which by default depends on how the function was called.
<MyButton onPress={ this.doSomething.bind(this) }>
This statement makes a call to doSomething
method. But since the event registration is done on different element, the Scope of doSomething
is different and is forcefully binded by using bind
method in javascript.
Also, in the second method you are not passing the data parameter, which you can pass using the second argument to the method like shown below.
<MyButton onPress={ this.doSomething.bind(this, data)} }>