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}

反应-无需单击即可删除（onClick）？

3 个答案: