Question

我试图用ReactJS解决下一个任务：让我们假设我有几个问题和答案字段。我想在页面上的所有答案之间分配10分。

我制作了一个表单，其中包含多个<select>字段，这些字段根据当前用户输入状态动态填充<option>个标记。

问题在于，当用户选择值时，它们将再次重置为零。请在此处查看代码示例并尝试选择一些值： https://jsfiddle.net/jcpyqf9v/1/

Answer 1

您的问题是由填充Select的选项引起的，此处：

let optionNodes = [];
for (let k = 0; k < 11 - pointsSum; k++) {
  optionNodes.push(<option key={k} value={k}>{k}</option>);
}

因为您只输出选项的子集，如果选择的选项不在列表中，则选择字段别无选择，只能输出默认值; 0。

试试这个;

let optionNodes = [];
for (let k = 0; k < 11 - pointsSum || k <= this.state.answers[i]; k++) {
  optionNodes.push(<option key={k} value={k}>{k}</option>);
}

具有反应的选择字段内的动态选项

1 个答案: