语义ui react下拉菜单中的选定值未在选中时显示

时间:2019-06-30 05:19:41

标签: javascript reactjs semantic-ui

选择后,我无法从下拉列表中获取所选值以在下拉列表中进行渲染。 已设置正确的值(通过控制台查看),但未在实际的下拉菜单中显示

    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>组件来自语义ui react

我有一个密码框here。进入初始页面后,请通过顶部的按钮进入Login页面。从广播组中选择Slot Sec officer,它将呈现3个下拉列表,第二个和第三个下拉列表(slotIddeviceId)正是我遇到的问题。如果您拉起控制台并进行选择,则将正确设置该值,但是一旦选择该值,该值就不会出现在下拉菜单中。

下拉菜单的代码位于getSlotIdsgetDeviceIds类中。并且onChange方法在FormikLoginForm类内部

1 个答案:

答案 0 :(得分:1)

这是因为您没有在用户选择值之后设置状态,就像您在“插槽安全员角色”中所做的一样(这是正确的,请参阅代码和框中的第246行)。
例如,要修复“设备ID”下拉列表,请在第258行之后,将以下代码放入第259行:

  

this.setState({deviceId:data.value});

,并且有效。在第253行之后,需要对slotId执行相同的操作:

  

this.setState({slotId:data.value});