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

Question

如果我这样写，则单击按钮有效

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

但是如果我这样写：

onClick={this.changeName(book)}

点击不起作用。

所以如果函数有参数，我应该使用“（）=> xxx（argument）;否则，我可以只使用” this.xxx“，对吗？

Answer 1

因为进行this.changeName(book)会在渲染时立即调用该函数。函数返回的是..不是函数，因此当您单击时，什么也不会发生。

() => this.changeColor(book)是一个箭头函数，它具有与此语法类似（但不是真的）的行为：

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

为避免这种情况，您可以使用第一个代码示例，也可以将函数转换为咖喱函数，然后将第二个语法保留在render中：

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

在渲染中一次调用时，此函数将返回另一个接收事件的函数，并首先设置bookInfo。