在地圖功能中反應onClick處理程序

我一直在網上搜索我的問題的答案，但沒有成功。我正在嘗試添加一個簡單的反應點擊處理程序到我的按鈕，但我似乎無法使其工作。這可能是一件非常簡單的事情，我無法把頭圍住它。在地圖功能中反應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> 
    ) 
    } 
}

它拒絕觸發功能，當我點擊一個按鈕。我試過.bind（this）和onClick = {（）=> this.deleteReview}等。

所有幫助表示感謝！

來源

2016-11-22 Mathias Lund

你應該傳遞給'onClick'參考函數'的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> 
    ) 
    } 
}

來源

2016-11-22 11:09:31

我認爲你缺少括號（）中的箭頭功能

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

來源

2016-11-22 11:33:27 duwalanise

從onClick函數調用刪除()，並使用{ this.deleteReview }確實會啓動該方法，但如果您需要綁定this以及該方法，請使用@duwalanise答案。

來源

2016-11-22 11:48:40

啊，現在我明白了。這是因爲我在服務器端渲染反應，這就是爲什麼點擊處理程序不起作用。

我將要呈現JS在客戶端上，以便爲它工作:)

來源

2016-11-22 13:07:08

在地圖功能中反應onClick處理程序

回答

相關問題