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