更新多个语义 ui 反应下拉键状态

Question

我正在使用 Semantic UI React 在下拉列表中呈现一些选择选项。

我有一个 child 组件，它映射到 object 数组并返回一些键。所以我为语义 ui 下拉列表

的 options 道具提供了以下内容

      <Dropdown
        id="slotId"
        value={slotId}
        initialized={initialized}
        onChange={onSlotIdChange}
        selection
        fluid
        placeholder="Please select a slot id"
        clearable
        options={slots.map(slotId => {
          return {
            text: slotId.slotId,
            value: slotId.slotId,
            key: slotId.slotId,
            description: `Initialized: ${slotId.initialized}`,
            initialized: slotId.initialized
          };
        })}
      />

我正在将状态提升到 parent，其中我定义了 changeHandler

onSlotIdChange = async (e, { value, initialized }) => {
this.setState(
  { slotId: value, initialized: initialized, isLoading: false },
  () => {
    console.log(
      "chosen slotId updated to state, callback -->",
      this.state.slotId
    );
    console.log("initialized", this.state.initialized);
  }
);

if (!value) {
  this.handleClear();
  return;
}
};

我这里有一个 codesanbox 问题。

基本上，当我选择 slotId 时，它会将 slotId 值更新为 state，但我也想将 initialized 值更新为 state。因此，例如，在 codesanbox 中，如果您从下拉列表中选择 slotId: 1，我还希望状态变量 initialized 更新为 Y.

的值

我正在努力从 child 获取 initialized 密钥以更新 parent 中选定的 ID。它只是被设置为空 "" 而不是 Y 或 N 的初始化值。

我认为语义处理事件的方式只改变了 value 键被识别

Answer 1

原因是因为在您的 Dropdown 组件选项中，您的值仅包括 slotId:

          options={slots.map(slot => {
              return {
                key: slot.slotId,
                text: slot.slotId,
                value: slot.slotId, // <--- this value here
                description: `Initialized: ${slot.initialized}`,
                initialized: slot.initialized
              };
            })}

要接收更多信息，您可以更新返回的 value：

         <Dropdown
            id="slotId"
            value={slotId}
            initialized={initialized}
            onChange={onSlotIdChange}
            selection
            fluid
            placeholder="Please select a slot id"
            clearable
            options={slots.map(slot => {
              return {
                key: slot.slotId,
                text: slot.slotId,
                value: { slotId: slot.slotId, initialized: slot.initialized },
                description: `Initialized: ${slot.initialized}`,
                initialized: slot.initialized
              };
            })}
          />

或在 onChange 回调中传入第三个参数：


          <Dropdown
            id="slotId"
            value={slotId}
            initialized={initialized}
            onChange={(e, d) => onSlotIdChange(e, d, slots.find(s => s.slotId === d.value).initialized)}
            selection
            fluid
            placeholder="Please select a slot id"
            clearable
            options={slots.map(slot => {
              return {
                key: slot.slotId,
                text: slot.slotId,
                value: slot.slotId,
                description: `Initialized: ${slot.initialized}`,
                initialized: slot.initialized
              };
            })}
          />

或更新返回的 data 以包含与上述第二种方法类似的找到的 initialized 值。哪个最适合你！

更新多个语义 ui 反应下拉键状态

Update multiple semantic ui react dropdown keys to state

javascript

reactjs

semantic-ui