React - 删除而不点击（onClick）？

Question

我使用带有删除功能的glyphicon如下：

<i className="glyphicon glyphicon-trash" onClick={this.deleteBook(book._id)}></i>

我认为它应该在点击时删除，但在页面渲染时，所有内容都会被删除而不会点击。

以下是代码的所有部分：

<div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <ul className="book-list">
                            {this.state.pageOfItems.map(book => (
                                <li key={book._id} className="book-list__item">
                                    <div className="book thumbnail">
                                        <div className="caption">
                                            <h3 onClick={() => this.props.history.push(`${this.props.match.url}/view/${book._id}`)}>{book.title}</h3>
                                            <h4>{book.bookdate}</h4>
                                            <i className="glyphicon glyphicon-trash" onClick={this.deleteBook(book._id)}></i>
                                        </div>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div className="col-md-6">

                    </div>
                </div>
            </div>

Answer 1

是的，在JSX {...}中，所有JS表达式都被执行了。所以当你写onClick={this.deleteBook(book._id)}时，你正在用这个()执行函数，就像你写的this.deleteBook(book._id)一样。让我们将其包含在箭头效果中

onClick={() => this.deleteBook(book._id)}

使用这个onClick道具，您附加了一个函数对象作为事件处理程序。因此，当点击发生时，将在内部调用此处理函数。不要自己执行事件处理程序，让它们由您附加的特定事件调用。

Answer 2

要么这样做

onClick={() => this.deleteBook(book._id)}

或第二种方法

onClick={this.deleteBook(book._id)}

然后在您定义函数的位置执行此操作

this.deleteBook = id => () => {}

Answer 3

请使用onClick函数，如下所示：

onClick={() => this.deleteBook.bind(this, book._id)}

因此，要在单击元素后接收book._id参数值，请使用以下模型：

deleteBook(id, event) {// todo someting}