javascript - 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 一样。删除Book(book._id)。让我们将其包装在箭头函数中作为

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

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