React 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

我认为你应该更新在 Input 上检查的道具。 Radio input 使用 checked 属性来显示或不显示 checked 状态。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Answer 2

查看您的输入，我可以看到一个循环状态问题 - 每个无线电输入的值不能简单地是状态值，它必须有一个实际值 - 可能是一个字符串值，如 value="The Big Blue Bear" 和要确保输入受到控制，您想做的是让它的检查状态评估 day2CorrectAnswer 的状态值是否等于此输入的值。

React setState() 不适用于单选字段 handleInput 方法

React setState() not working on radio field handleInput method

javascript

forms

radio-button

reactjs

react-state-management