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
Post a Comment