Невозможно сбросить простую радиокнопку - React JS

Question

Я пишу викторину. Когда я выбираю ответ, я проверяю, правильный ли он, и сразу же получаю новый вопрос. Проблема в том, что я не могу заставить React отобразить выбранную радиокнопку, когда это неправильный ответ.

Скриншот того, как это выглядит

Я создание викторины вопросов из файла JSON. Мне нужно динамически создавать теги ввода и метки. Вот что у меня есть на данный момент:

Я могу получить следующий вопрос, когда выбран правильный, но он не показывает ни одного выбранного радио. Мой 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/ . Я думаю, проблема в том, что я создаю rad ios с использованием данных Dynami c.

В любом случае, я изменил его так, как было раньше, и до сих пор у меня нет видимого выбранного радио, хотя в журнале отображается выбранный ответ.

 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);
      }
    );
  };

Answer 1

Вы назначаете статус this.state.isRadioChecked всем переключателям, например, checked={this.state.isRadioChecked}. Таким образом, все переключатели будут отмечены или сняты одновременно.

Вместо этого вы можете использовать state.selectedAnswer для обновления отмеченного атрибута переключателя. Примерно так -

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

Здесь объясняется хорошая статья о том, как создавать радиогруппы - http://react.tips/radio-buttons-in-reactjs/