Реагирует setState () не работает на методе handleInput радиополя

Question

Я работаю над методом отправки по радио в приложении React.

handleSelect = e => {
    const key = e.target.name;
    const value = e.target.id;
    this.setState({ [key]: value});
    console.log(this.state);
  }

Вот поле радиосвязи, о котором идет речь:

<div className="answer">
                      <Input type="radio"
                        id="day2AnswerA"
                        name="day2CorrectAnswer"
                        value={this.state.day2CorrectAnswer}
                        onChange={this.handleSelect}
                      />

А вот мое состояние:

  state = {
    rocketName: '',
    className:'',

    day2QuestionName: '',
    day2ReviewText: '',
    day2QuestionText: '',
    day2AnswerA: '',
    day2AnswerB: '',
    day2AnswerC: '',
    day2AnswerD: '',
    day2CorrectAnswer: '',
  }

Это будет часть более крупной формы с несколькими радиополями, все с одним и тем же атрибутом name, так что только один может быть выбран за один раз.

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

Почему это не работает?

Answer 1

Глядя на ваш ввод, я вижу проблему с циклическим состоянием - значение каждого радиовхода не может просто быть значением состояния, вместо которого оно должно иметь фактическое значение - вероятно, строковое значение типа value = "The Big Blue Bear" и чточтобы убедиться, что вход контролируется, необходимо проверить его проверенное состояние, если значение состояния для day2CorrectAnswer равно значению этого ввода.

Answer 2

Я думаю, вы должны обновить реквизиты, проверенные на входе.Радиовход использует проверенный атрибут, чтобы показать или не показать проверенный статус.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio