从语义 ui 中选择的值在选择时没有出现反应下拉列表

Question

我无法从下拉列表中获取选定的值，以便在选定后在下拉列表中呈现。正在设置正确的值（通过控制台查看）但未显示在实际下拉列表中

    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 页面。 Select Slot Sec officer 来自无线电组，它将呈现 3 个下拉菜单，第二个和第三个下拉菜单（slotId 和 deviceId）是我遇到问题的地方。如果您拉起控制台并进行选择，则值设置正确，但一旦选择该值，它就不会出现在下拉列表中。

下拉菜单的代码在 getSlotIds 和 getDeviceIds class 中。 onChange 方法在 FormikLoginForm class

中

Answer 1

这是因为您没有在用户 select 值之后设置状态，就像您在 "Slot Security Officer Role" 中所做的那样（这是正确的，请参阅您的 codesandbox 中的第 246 行）。
例如，要修复 "device id" 下拉列表，在第 258 行之后，我将此代码放在第 259 行：

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

并且有效。同样需要为 slotId 做，在第 253 行之后：

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

从语义 ui 中选择的值在选择时没有出现反应下拉列表

Selected value from semantic ui react dropdown not appearing when selected

javascript

reactjs

semantic-ui