Summary
First of all, we know that in React, events are bound to elements through small camels:
fn = ()=>{
//执行代码
}
button onClick={
this.fn}>111</button>
But if you have the foundation of Vue, you can clearly see the difference between the two. In Vue, we can pass parameters directly to fn.
But if in React we do:
fn = (value)=>{
//执行代码
console.log(value)
}
button onClick={
this.fn('2222')}>111</button>
You'll notice that 2222 has been printed when the page loads. But it doesn't work when the button is clicked.
This shows that this method is not bound to the button, but is called directly when the button is loaded.
And this point is also easy to understand, React did not do this to Vue, it just called it directly and bound the return value to onClick. So here we have to remember that when an event is bound, a function must be bound .
OK, now that I understand the problem, what should I do if I want to pass parameters when calling a method?
1. Arrow functions
The first method, if we bind an event to the button, the outer layer is bound to an arrow function, and the inner layer is the method we wrote, which seems to be able to solve the problem perfectly:
speak = (value) =>{
alert(value)
}
<button onClick={
() => {
this.speak('qnmlgbd')}}>说话</button>
Through the arrow function, the speak method we defined is directly bound to onClick, and the parameters are passed.
2. Function currying
Then if the arrow function is OK, it seems that we return a method directly in the method, and there is no problem.
say = (value)=>{
return ()=>{
alert(value)
}
}
<button onClick={
this.say('qnmlgbd')}>说话</button>
In this way, when we bind onClick, we don't need to write arrow functions, which looks better. But the principle is the same as the method just now.
3. bind method
We know that the bind method is to change the this point of the method and return a method. will not be called directly.
OK, if bind has this feature, we can use it to solve this problem.
loud(value){
alert(value)
}
<button onClick={
this.loud.bind(this,'qnmlgbd')}>说话</button>
It can be noted here that the loud method does not use the arrow function method when it is defined. The previous two methods used the arrow function method when they were defined.
This is because, in React, if you define a function without using an arrow function, this inside the function will be the element that binds the event, not the React component . But if you use the bind method for event binding, you don't need to consider this issue.
Finally, let's take a look at the differences between these three methods:
export default class Child extends Component {
say = (value)=>{
return ()=>{
alert(value)
}
}
speak = (value) =>{
alert(value)
}
loud(value){
alert(value)
}
render() {
return (
<div>
<button onClick={
this.say('qnmlgbd')}>说话</button>
<button onClick={
() => {
this.speak('qnmlgbd')}}>说话</button>
<button onClick={
this.loud.bind(this,'qnmlgbd')}>说话</button>
</div>
)
}
}