时间戳

首页 > 解决方案 > React js，根据值设置类

javascript - React js，根据值设置类

问题描述

我正在做一个测验，我想这样做，所以当用户点击正确答案时，如果用户点击错误答案，它会变成绿色，它会变成红色。

这就是我现在得到的：

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 函数发送一个值，该函数检查单击的值是否与我正在为类名设置状态的问题的答案相同。

这个问题是，如果我点击正确的选项，两个都会变成绿色，如果我点击错误的选项，它就会变成红色。

标签： javascriptreactjs

解决方案

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

此外，不确定是否只是复制/粘贴不正确，但请确保您的状态在渲染方法中分配给 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>

  }

推荐阅读