避免在通过React状态更改所选选项值时将select标记的值重置为默认值
避免在通过React状态更改所选选项值时将select标记的值重置为默认值
提问于 2019-06-12 00:54:03
我有一个select标记，其中的选项由React状态决定，并且可以在值和数字上进行更改。只要选择了不是默认的选项，并且状态更改了它的值，选择标记就会重置为默认选项(第一个)。
我尝试向选项标签添加不会根据值改变的唯一键(另一个线程建议这样做)。
...<option key={`unique-${index}`}>...我想到的一个想法是，让UUID或类似于每个选项的值不变，并有一个像display name这样可以自由变化的单独值。这并不理想，因为我们还有其他依赖于当前设置的代码。
这是我们现在在jsfiddle上遇到的问题的一个例子。
第三个选项应该已经被选中(如果没有选择它)，如果您使用输入来更改它的值，您将看到选择将切换到第一个选项。
总而言之:除了循环遍历状态并比较和替换较旧的值之外，还有什么方法可以保持选定的值不变？
编辑:我要指出的是，上面的例子是简化的。在实际代码中，有许多具有不同值的相似<select>。这使得简单地循环遍历状态变得更加困难，这也是我寻找替代方案的原因。
解决方案：
正如下面的答案所示，如果select是受控制的，这意味着它的值是由状态定义的，那么状态当然需要在更改时更新。
我将来要做的只是使用<select>作为一个不受控制的元素，让它管理自己的值。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-12 01:03:16
你的状态正在发生变异
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
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56548476
复制相关文章
相似问题