通过React状态更改所选选项值时，避免将选择标记的值重置为默认值

Question

我有一个select标签，其中的选项由React状态决定，可以更改值和数字。 每当选择非默认选项且状态更改其值时，select标记将重置为默认选项（第一个）。

我已经尝试添加不会根据选项标记的值更改的唯一键（不同的线程建议）。

...<option key={`unique-${index}`}>...

我想出的一个想法是拥有UUID或类似于每个选项的值不会改变，以及一个单独的值，如display name可以自由改变。 这不是理想的，因为我们有其他代码取决于当前的设置。

这是我们现在在jsfiddle上遇到的问题的一个例子。

应该已经选择了第三个选项（如果没有选择它），并且如果使用输入来更改其值，您将看到选择将切换到第一个选项。

总结：除了循环遍历状态并比较和替换旧值之外，有没有办法保持相同的选定值？

编辑：我应该指出上面的例子是简化的。 在实际代码中，有许多类似的<select>具有不同的值。 这使得简单地循环通过状态变得更加困难，这也是我寻找替代方案的原因。

解：

如下面的答案所示，如果选择被控制，意味着它的值由状态定义，那么当然需要在更改时更新状态。

我将来要做的只是使用<select>作为一个不受控制的元素，让它管理自己的价值。

Answer 1

你正在改变状态

  blurInput(value) {
    const newItems = [...this.state.items];
    newItems[2].value = value; // not immutable
    this.setState({
        items: newItems
    });
  }

您必须将其更改为：

  blurInput(value) {
    const items = [...this.state.items];
    const selected = this.state.selected === items[2].value
      ? value
      : this.state.selected;
    items[2] = {...items[2], value};
    this.setState({
        items,
        selected
    });
  }