javascript - 在 map 函数中 react onClick 处理程序

Question

我一直在网上搜索我的问题的答案，但没有成功。我正在尝试向我的按钮添加一个简单的 react 点击处理程序，但我似乎无法使其工作。这可能真的很简单，我只是无法理解它。

这是我的代码:

 export default class ReviewBox extends Component {

 deleteReview() {
  console.log("hey");
 }

 render() {
  const {reviews, date, lectureId} = this.props;
  const that = this;
    return (
      <div className="container content-sm">

        <div className="headline"><h2>Reviews</h2> <span>{date}</span></div>
          <div className="row margin-bottom-20">

            {reviews.map(review => {
                return(
                  <div className="col-md-3 col-sm-6">
                    <div className="thumbnails thumbnail-style thumbnail-kenburn">
                      <div className="caption">
                        <h3>{review.comment}</h3> <br />
                        <button className="btn btn-danger" onClick={this.deleteReview()}>Delete</button>
                      </div>
                    </div>
                  </div>
                )
            })}

          </div>

          <hr />
          <AddReview lectureId={lectureId} />

      </div>
    )
  }
}

当我点击一个按钮时，它拒绝触发该功能。我试过 .bind(this) 和 onClick={() => this.deleteReview} 等。

感谢所有帮助!

Answer 1

我认为你在箭头函数中缺少大括号 ()

<button className="btn btn-danger" onClick={() => this.deleteReview()}>Delete</button>