React中map函数中的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}等方法。

非常感谢您的帮助！

- Mathias Lund

---

你应该将函数 onClick={ this.deleteReview } 作为参考传递给 onClick - 删除函数名后面的括号。 - Oleksandr T.

Answer 1

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

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

- duwalanise

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

- Liju Kuriakose

Answer 3

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

- Gaurab Kc

Answer 4

啊，现在我明白了。 这是因为我正在服务器端渲染React，所以点击处理程序不起作用。

我必须在客户端上呈现JS才能使它起作用 :)

- Mathias Lund