javascript - Disable click event when a user provides feedback -


i'm new reactjs , trying find way disable click events 2 divs when user provides feedback javascript. assistance provided grateful. how might below code:

var submitrating = react.createclass({    feedback_phase: 1,  // - user agrees give feedback , yet 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 add more parameters sent 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)}> video answered correctly </div>             <div classname="option-irrelevant" onclick={this.submitrating.bind(this, 1)}> video did not answer </div>         </div>         <div classname={this.state.phase == this.thanks_phase ? "feedback-reply" : "hidden"}> <h4> feedback </h4> </div>       </div>     )   },  }); 

in react, want trigger re-render changing state in order change component. doing classes, use inline conditions change output of markup.

// change onclick={this.submitrating.bind(this, 10)} // onclick={this.state.somecondition ? this.submitrating.bind(this, 10) : null} 

once click event (and ajax?) stuff finishes, use this.setstate trigger re-render, doing classes.

edit:

assuming want click listeners disable phase change, can use:

onclick={this.state.phase == this.feedback_phase ? this.submitrating.bind(this, 10) : null} 

Comments