當用戶提供反饋時，禁用點擊事件

Question

我是新來的ReactJS，並嘗試找到一種方法來禁用兩個div的點擊事件，當用戶提供JavaScript的反饋。提供的任何援助將不勝感激。我怎麼可能做到這一點與下面的代碼：

var SubmitRating = React.createClass({ 

    FEEDBACK_PHASE: 1, // - user agrees to give feedback and is yet to give 
    THANKS_PHASE: 2, // - user gave feedback 

    getInitialState: function() { 
     return { 
      "phase": this.FEEDBACK_PHASE 
     } 
    }, 

    setPhase: function(phase) { 
     this.setState({ 
      "phase": phase 
     }); 
    }, 

    componentWillReceiveProps: function(nextProps) { 
     if(nextProps.active) { 
      this.setPhase(this.FEEDBACK_PHASE); 
     } 
    }, 

    submitRating: function(rating) { 
     var currentVideo = this.props.currentVideoData; 

     this.setPhase(this.THANKS_PHASE); 
     this.props.submitDone(); 
     //TODO : need to add more parameters which will be sent to rating app 
     ajaxPost("/answer_rating", {"documentID": currentVideo.talk_id, 
           "startTime": currentVideo.start_time_sec, 
           "endTime": currentVideo.stop_time_sec, 
           "userRanking": rating, 
           "hashCode": currentVideo.metadata.hash, 
           "questionText": currentVideo.metadata.question }, function(response){ 
      console.log(response); 
     }); 
    }, 

    render: function() { 
    return (
     <div className={this.props.active ? "feedback-options-container" : "hidden"}> 
     <div className={this.state.phase == this.FEEDBACK_PHASE ? "feedback-options" : "hidden"} > 
      <div className="option-relevant" onClick={this.submitRating.bind(this, 10)}> This video answered correctly </div> 
      <div className="option-irrelevant" onClick={this.submitRating.bind(this, 1)}> This video did not answer properly </div> 
     </div> 
     <div className={this.state.phase == this.THANKS_PHASE ? "feedback-reply" : "hidden"}> <h4> Thanks for your feedback </h4> </div> 
     </div> 
    ) 
    }, 

}); 

Answer 1

在反應過來，要觸發通過改變順序的狀態更改組件重新繪製。就像你已經在使用類一樣，使用內聯條件來改變標記的輸出。

// change 
onClick={this.submitRating.bind(this, 10)} 
// to 
onClick={this.state.someCondition ? this.submitRating.bind(this, 10) : null} 

一旦點擊事件（和Ajax？）的東西完成，只需使用this.setState觸發重新渲染，就像你已經與類做。

編輯：

假設你想點擊聽衆禁用與phase變化，你可以使用：

onClick={this.state.phase == this.FEEDBACK_PHASE ? this.submitRating.bind(this, 10) : null}