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 = {（）=＆gt; this.deleteReview}等。

所有帮助表示赞赏！

Answer 1

我认为你缺少箭头功能中的大括号（）

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

Answer 2

我认为这会对你有帮助.....

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

Answer 3

从()函数调用中删除onClick并使用{ this.deleteReview }确实会启动该方法，但如果您需要在该方法中绑定this，请转到@duwalanise回答。

Answer 4

啊，现在我明白了。这是因为我在服务器端渲染反应，这就是点击处理程序无法工作的原因。

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

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

4 个答案: