Question

我正在做一个测验，所以我想这样做，以便当用户单击正确的答案时，如果用户单击错误的答案，它将变为红色。

这就是我现在得到的：

state = {
  answerClass: false,
};


handleVoting(answer) {
    if (answer == this.props.questions[this.props.questionIndex].answer) {
      this.setState({
        answerClass: 'green'
      });
    } else {
      this.setState({
        answerClass: 'red'
      });
    }

    var options = [];

    if (this.props.options) {
      for (var i = 0; i < this.props.options.length; i++) {
        options.push( < div className = {
            this.state.answerClass
          } >
          <
          img onClick = {
            this.handleVoting.bind(this, this.props.options.value)
          }
          src = {
            url
          }
          /></div > );
      }
    }

因此，这将创建两个图像按钮，当我单击其中的一个按钮时，我会将一个值发送给handleVoting函数，该函数检查单击的值是否与我为类设置状态的问题的答案相同名称。

问题是，如果我单击正确的选项，两者都变成绿色，而如果我单击错误的选项，则两者都变成红色。

Answer 1

您接近了！发生的事情是您将状态的相同部分应用于所有按钮。解决此问题所需要做的就是每个按钮都有单独的状态部分。对于这种情况，我建议使用一个数组保存每个按钮的状态。然后，您只需要将选项的索引传递给handleVoting函数，并使用它来确定要设置状态的哪一部分。

此外，不确定是否只是错误地复制/粘贴，但请确保您的状态已通过render方法分配给UI。我还建议您在动态分配数组时使用map函数。

请参阅下文...

state = {
  answerClasses: [],
};


handleVoting(answer, index) {
    if (answer == this.props.questions[this.props.questionIndex].answer) {
      let newAnswerClasses = this.state.answerClasses;
      newAnswerClasses[index] = 'green';
      this.setState({
        answerClasses: newAnswerClasses
      });
    } else {
      let newAnswerClasses = this.state.answerClasses;
      newAnswerClasses[index] = 'red';
      this.setState({
        answerClasses: newAnswerClasses
      });
    }
   }

render() {
    let options = this.props.options.map(function(option, i) {
       return (< div className = {
            this.state.answerClasses[i]
          } >
          <
          img onClick = {
            this.handleVoting.bind(this, this.props.options.value, i)
          }
          src = {
            url
          }
          /></div > );
    }.bind(this));
    return <div>{options}</div>

  }

编辑评论

state = {
  answerClasses: [],
};


handleVoting(answer, index) {
      let newAnswerClasses = this.state.answerClasses;
    if (answer == this.props.questions[this.props.questionIndex].answer) {
      newAnswerClasses[index] = 'green';
      this.setState({
        answerClasses: newAnswerClasses
      });
    } else {
      // for loop method
      for(let i=0; i < this.props.options.length; i++) {
        if(this.props.options[i].value === answer) {
          newAnswerClasses[i] = 'red';
          break;
        }
      }
      // OR passing index to component via props method
      newAnswerClasses[this.props.answerIndex] = 'green';
      newAnswerClasses[index] = 'red';
      this.setState({
        answerClasses: newAnswerClasses
      });
    }
   }

render() {
    let options = this.props.options.map(function(option, i) {
       return (< div className = {
            this.state.answerClasses[i]
          } >
          <
          img onClick = {
            this.handleVoting.bind(this, this.props.options.value, i)
          }
          src = {
            url
          }
          /></div > );
    }.bind(this));
    return <div>{options}</div>

  }

React js，基于值设置类

1 个答案: