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
    });
  }

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

1 个答案: