我无法从下拉列表中获取选定的值,以便在选择后在下拉列表中呈现。 正在设置正确的值(通过控制台查看)但未显示在实际下拉列表中
const onSlotIdChange = (e, data) => {
console.log(props);
console.log("slotId fired, value ---> ", data.value);
props.setFieldValue("slotId", data.value);
};
实际的组件在这里
<Dropdown
id="slotId"
value={slotId}
onChange={onSlotIdChange}
options={slotIds.map(id => {
return {
key: id.id,
text: id.id,
value: id.id
};
})}
/>
我遇到过与此完全相同的问题,之前的解决方案是使用类似 props.setFieldValue("slotId", e.currentTarget.textContent);
的方法但我试过了,但在这种情况下不起作用。 <Dropdown>
组件来自 Semantic ui react
我有一个codesandbox here .进入初始页面后,转到 Login
通过顶部的按钮翻页。选择 Slot Sec officer
从 radio 组它将呈现 3 个下拉菜单,第二个和第三个下拉菜单( slotId
和 deviceId
)是我遇到问题的地方。如果您拉起控制台并进行选择,则值设置正确,但一旦选择该值,它就不会出现在下拉列表中。
下拉菜单的代码在 getSlotIds
中和 getDeviceIds
类。和 onChange
方法在里面 FormikLoginForm
类
最佳答案
这是因为您没有在用户选择值后设置状态,就像您在“Slot Security Officer Role”中所做的那样(这是正确的,请参阅代码和框中的第 246 行)。
例如,为了修复“设备 ID”下拉列表,在第 258 行之后,我将这段代码放在第 259 行:
this.setState({deviceId: data.value});
并且有效。在第 253 行之后,对 slotId 也需要做同样的事情:
this.setState({slotId: data.value});
关于javascript - 从语义 ui react 下拉列表中选择的值在选择时不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56822586/