マップ機能の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（これ）とonClick = {（）=> this.deleteReview}などで試してみました。

すべてのお役に立ちました！私は、これはあなたを助けるだろうと思い

Answer 1

.....

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 2

は、私はあなたがonClick関数呼び出しから()の取り外しと{ this.deleteReview }を使用して、矢印関数のかっこ（）

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

Answer 3

が欠けていると思います実際にメソッドを起動しますが、thisもそのメソッドの中にバインドする必要がある場合は、@duwalaniseと答えてください。

Answer 4

ああ、今私は理解しています。 これは、サーバ側で反応を表示しているためです。そのため、クリックハンドラは機能しません。

私は、クライアント上でJSをレンダリングする必要があります、それは:)