即使在重新加载选项后，下拉列表的选定值仍然存在
即使在重新加载选项后，下拉列表的选定值仍然存在
提问于 2020-06-07 18:01:34
我将描述一个我在修复时遇到麻烦的bug。
我正在使用这个select/dropdown。
假设已经填充了下拉列表，并且已经选择了option1。用户使用另一个控件，因此调用handlePopulate()。在下拉列表中，'option1‘标签仍然可见。
场景1:当按下insert按钮时，我们看到插入了旧的“value”。坏的!
场景2:用户单击下拉菜单并选择另一个选项。当插入按钮被按下时，我们看到使用了新的'value‘。好的。
场景3:用户单击下拉菜单，但没有选择新选项。通过再次单击下拉菜单关闭菜单。使用了旧的“value”。坏的!
场景4:用户单击下拉菜单。并且再次选择选项1。现在使用了新的“value”。
那么，我该如何解决这个问题呢？
// React Hooks based state
const [insertFields, setInsertFields] = React.useState<FieldData[]>([]);
const [selectedInsertField, setSelectedInsertField] = React.useState<FieldData | undefined>();
// skip
const handlePopulate= async () => {
// skip
setInsertFields(newFields)
}
//React element Hierarcy
<Select
options={insertFields}
defaultValue={insertFields[0]}
onChange={handleFieldSelection} // calls setSelectedInsertField(newValue)
/>
// When clicked this butten uses selectedInsertField
<Button .../>Insert</Button>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-07 19:04:47
使用value prop代替defaultValue，并使用useState提供默认值。下面提供了示例。
// React Hooks based state
const [insertFields, setInsertFields] = React.useState<FieldData[]>([]);
// Provide default value here
const [selectedInsertField, setSelectedInsertField] = React.useState<FieldData | undefined>(insertFields[0]);
// skip
const handlePopulate= async () => {
// skip
setInsertFields(newFields)
}
//React element Hierarcy
// Change defaultValue to value
<Select
options={insertFields}
value={selectedInsertField}
onChange={handleFieldSelection} // calls setSelectedInsertField(newValue)
/>
// When clicked this butten uses selectedInsertField
<Button .../>Insert</Button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62243729
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号