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

时间:2016-05-31 19:24:17

标签: reactjs

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

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

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

1 个答案:

答案 0 :(得分:0)

您的问题是由填充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>);
}