当用户提供反馈时禁用单击事件

Disable click event when a user provides feedback

本文关键字：单击 事件 用户      更新时间：2023-09-26

我是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>
    )
  },
});

在React中，你想要通过改变状态来触发重新呈现。就像您已经对类所做的那样，使用内联条件来更改标记的输出。

// 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}
相关文章：