检查循环单选按钮答案

【问题标题】：Checking looped radio buttons检查循环单选按钮
【发布时间】：2020-03-13 05:29:18
【问题描述】：

我正在尝试使用 react 制作一个测验应用程序，它有一个问题列表，每个问题都有一个选择对象，并且在每个问题中我都有一个上一个和下一个按钮。

我设法使一切正常，但我面临的问题是选择，它们是单选按钮，每个问题都有 4 个单选按钮，当我选择第一个问题的第一个答案时，它会正确提交值但是它检查所有问题中的所有单选按钮，如果我转到下一个问题并选择了一个选项，它会正确提交它的值，但会更改所有问题的检查等等，我想要的行为是能够在不重置表单或影响其他问题的情况下分别检查每个问题的每个单选按钮，因此当我单击上一个或下一个时，我可以看到我选择的选项，这里是代码：

renderQuestions() {
    const questions = this.state.questions || [];
    if (questions) {
      return questions.map(question => (
        <React.Fragment>
        <p>{question.title}</p>
        <hr/>
        <p>Choose correct answer</p>
          {Object.keys(question.choices).map(function(key) {
            const value = question.choices[key];
            return (
                <input
                  type="radio"
                  label={value}
                  name="choice"
                  onChange={e => this.onChange(id, key, e)}
                  id={value}
                  checked={key}
                />
            );
          }, this)}
        </React.Fragment>
      ));
    }
  }

【问题讨论】：

您必须向我们展示您的 onChange 功能，以便我们了解它可能无法正常工作的原因
还有一点不清楚你的状态数据结构是什么，看到checked 值是对象键有点奇怪
我认为问题在于map 函数中的顶级组件缺少key 属性。

标签： javascript reactjs forms radio-button

【解决方案1】：

无线电input 的name 属性对于每个问题必须是唯一的：

 name={`choice-${questionId}`}

浏览器强制每个name 只能检查一个无线电。

同名有多个checked=true 可能是无效的HTML。当您提交 form 时，它只会 HTTP POST 选中的选项之一。

细读https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

【讨论】：