时间戳

首页 > 解决方案 > 无法重置简单的单选按钮 - React JS

javascript - 无法重置简单的单选按钮 - React JS

问题描述

我正在写一个琐事应用程序。当我选择一个答案时，我会检查它是否正确，然后马上得到一个新问题。问题是当答案错误时，我无法让 React 呈现选定的单选按钮。

它的外观截图

我正在从 JSON 文件生成琐事问题。我必须动态地进行输入和标签标记。这是我到目前为止所拥有的：

I can get my next question when the selected one is right, but it doesn't show any radio selected. 我的isRadioChecked开头是false. 我也试过了checked={this.state.isRadioChecked == object}。

下面，我检查点击的收音机是否是正确的答案和我的渲染方法

 checkResult = event => {
    this.setState(
      {
        selectedAnswer: event.target.value
      },
      () => {
        if (this.state.selectedAnswer === this.state.correctAnswer) {
          this.setState(
            {
              isRadioChecked: false,
              currentQuestionNumber: this.state.currentQuestionNumber + 1
            },
            () => {
              this.getNewQuestion();
            }
          );

render() {
    return (
      <div onChange={this.checkResult}>
        <h2>Question Component</h2>
        <h3>{this.displayQuestion()}</h3>
        <div>{this.displayAlternatives()}</div>
      </div>
    );
  }
}

我真的很感谢你的帮助。谢谢你！！

[编辑]

谢谢你，Arpitha这是我尝试的第一件事，实际上我的最后一次尝试直接来自http://react.tips/radio-buttons-in-reactjs/。我认为问题在于我正在使用动态数据创建收音机。

无论如何，我确实把它改成了以前的样子，但我仍然看不到选定的收音机，即使日志显示了选定的答案。

 setUpAnswers() {
    let tempAnswerArray = this.mergeAnswers(this.state.currentQuestionNumber);
    tempAnswerArray = tempAnswerArray.map((object, i) => renderHTML(object));
    console.log(tempAnswerArray[0]);

    tempAnswerArray = tempAnswerArray.map((object, i) => (
      <div key={i}>
        <input
          type="radio"
          name="answers"
          checked={this.state.selectedAnswer === object}
          onChange={this.handleOptionChange}
          id={object}
          value={object}
        />
        <label htmlFor={object}>{object}</label>
      </div>
    ));

    this.setState({
      answerArray: tempAnswerArray
    });
  }
  //*************************************************** */
  handleOptionChange = changeEvent => {
    this.setState(
      {
        selectedAnswer: changeEvent.target.value
      },
      () => {
        console.log(this.state.selectedAnswer);
      }
    );
  };

标签： javascripthtmlreactjs

解决方案

您正在this.state.isRadioChecked像这样为所有单选按钮分配状态checked={this.state.isRadioChecked}。所以所有的单选按钮将同时被选中或取消选中。

相反，您可以使用state.selectedAnswer更新单选按钮的选中属性。像这样的东西-

checked={this.state.selectedAnswer === object}

这里解释了一篇关于如何创建广播组的好文章 - http://react.tips/radio-buttons-in-reactjs/

推荐阅读