我们什么时候应该在事件监听器中使用匿名函数？答案

【问题标题】：When should we use anonymous function in event listener in react?我们什么时候应该在事件监听器中使用匿名函数？
【发布时间】：2017-11-10 22:46:58
【问题描述】：

我是 React 初学者。在学习 React 的过程中，有时我看到有人在事件监听器中使用匿名函数，不知道下面的代码是否相同。我认为，要调用函数 onDelete，我们只需要使用 onClick={this.onDelete(id)}

    const cartItem=this.props.cart.map((bookCart)=>{
                return (    
    <Button onClick={()=>{this.onDelete(bookCart._id)}}>Delete</Button>
    )
},this;

和

    const cartItem=this.props.cart.map((bookCart)=>{
                return (    
    <Button onClick={this.onDelete(bookCart._id)}>Delete</Button>
    )
},this;

【问题讨论】：

欺骗，检查一下，可能会解决你的疑惑：stackoverflow.com/questions/42322553/… 而且，关于性能，这篇文章值得一读，如果你是一个 React 初学者，会给你很多有用的信息： medium.com/@machnicki/… :)
实际上，您的第二个示例不起作用，因为您调用的是函数而不是传递它。您必须使用箭头函数或绑定 arg。

标签： reactjs

【解决方案1】：

当需要传递参数时，可以使用箭头函数。

如果你给函数加上括号，你实际上是在执行函数。

因此，使用此代码：

<Button onClick={ this.onDelete(bookCart._id) }>Delete</Button>

...您将 onClick 设置为 this.onDelete(bookCart._id)

的 result

如果你使用这样的箭头函数：

<Button onClick={ () => this.onDelete(bookCart._id) }>Delete</Button>

...那么您将 onClick 设置为一个函数，该函数在执行时将使用参数调用 this.onDelete。

我希望这会有所帮助。

【讨论】：