反应-为什么onClick中的此功能不起作用？

Question

If I write like this, click button works

<Menu.Item 
    key={book.uid}
    onClick={() => this.changeColor(book)}     
    >

But if I write like this:

onClick={this.changeName(book)}

the click doesn't work.

So if the function has arguments, I should use "() => xxx(argument); otherwise, I can just use "this.xxx", right?

Answer 1

Because doing this.changeName(book) will instantly call the function when rendering. And what your function returns is.. not a function, so when you click, nothing will happen.

And () => this.changeColor(book) is an arrow function, it has a similar (but not really) behavior as this syntax :

() => { this.changeColor(book) }

To avoid this, you could use your first code example or transform your function into a curried one and keep the second syntax in the render :

changeName = bookInfo => event => {
    /* Your code here */
}

When called once in the render, this function will return another function receiving the event and set the bookInfo first.