什麼時候應該在事件監聽器中使用匿名函數做出反應？

我是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;

來源

2017-11-10 Alice

杜佩，看看這個，概率可以解決你的疑惑：https://stackoverflow.com/questions/42322553/when-to-use-anonymous-functions-in-jsx 而此外，關於性能，這篇文章是DEFF值得一讀，如果你是一名React初學者，會給你很多有用的信息：https：//medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb :) – elbecita

其實，你的第二個例子將不起作用，因爲你調用的是函數而不是傳遞它。您必須使用箭頭函數或綁定參數。 –

當你需要傳遞參數可以使用箭頭功能。

如果您將函數的括號添加到函數中，那麼您實際上正在執行該函數。

因此，使用此代碼：

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

...你設置的onClick到結果this.onDelete(bookCart._id)

如果你用一個箭頭的功能是這樣的：

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

...然後您正在設置onClick這個函數在執行時會用參數調用this.onDelete。

我希望這會有所幫助。

來源

2017-11-11 00:13:30

什麼時候應該在事件監聽器中使用匿名函數做出反應？

回答

相關問題