在map函数中反应onClick处理程序

Question

我一直在网上搜索我的问题的答案,但没有成功.我试图在我的按钮上添加一个简单的反应点击处理程序,但我似乎无法使它工作.这可能是非常简单的事情,我无法绕过它.

这是我的代码:

 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>