Javascript map函数中的React onClick处理程序

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

这是我的密码：

 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>
    )
  }
}

导出默认类ReviewBox扩展组件{
deleteReview（）{
console.log（“嘿”）；
}
render（）{
const{reviews，date，deid}=this.props；
常数=this；
返回(
评论{date}
{reviews.map（review=>{
返回(
{review.comment}

删除
)
})}

)
}
}

当我点击一个按钮时，它拒绝启动该功能。我试过使用.bind（this）和onClick={（）=>this.deleteReview}等

---

感谢大家的帮助

我想这会帮助你

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>
    )
  }
}

导出默认类ReviewBox扩展组件{
deleteReview（）{
console.log（“嘿”）；
},
render（）{
const{reviews，date，deid}=this.props；
常数=this；
返回(
评论{date}
{reviews.map（review=>{
返回(
{review.comment}

删除
)
})}

)
}
}

我认为arrow函数中缺少大括号（）

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

this.deleteReview（）}>Delete

从

onClick

函数调用中删除

（

）并使用

{this.deleteReview}

确实会启动该方法，但是如果您需要在该方法中绑定

此

，请使用

@duwalanise

答案。

啊，现在我明白了。 这是因为我在服务器端呈现react，这就是为什么click处理程序不工作的原因

---

我必须在客户端上呈现JS，以便它工作：）

您应该传递到

onClick

函数的引用

onClick={this.deleteReview}

-在函数名之后删除

（）