Javascript 将多个语义ui react下拉键更新为状态

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

我有一个子组件，它映射到一个对象数组并返回一些键。因此，我为语义ui下拉列表的

选项
道具提供了以下内容

      <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
          };
        })}
      />

我对这个问题有一个看法

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

我正在努力从子级获取
初始化的
键，以便使用父级中选定的Id进行更新。它只被设置为空的
“
，而不是初始化的值Y或N

我认为语义处理事件的方式只会更改
值
键
原因是在
下拉列表
组件的选项中，您的值只包括
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
              };
            })}

或者在
onChange
callback上传入第三个参数：


          <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
              };
            })}
          />


onSlotIdChange（e，d，slots.find（s=>s.slotId==d.value）.initialized）}
选择
流体
占位符=“请选择插槽id”
清晰的
选项={slots.map（slot=>{
返回{
关键字：slot.slotId，
文本：slot.slotId，
值：slot.slotId，
描述：`Initialized:${slot.Initialized}`，
已初始化：slot.initialized
};
})}
/>

或者更新返回的
数据
以包含找到的
初始化值
，类似于上面的第二种方法。随便哪个最适合你

         <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
              };
            })}
          />


          <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
              };
            })}
          />