Question

我正在尝试使用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>
      ));
    }
  }

Answer 1

广播电台name的{{1}}属性对于每个问题必须唯一：

input

浏览器强制每个name={`choice-${questionId}`}只能检查一个广播。

使用相同的名称进行很多检查= true可能是无效的HTML。提交name时，它将仅HTTP POST选中的选项之一。

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

检查循环单选按钮

1 个答案: