Question

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

我有一个子组件，该子组件映射到对象数组上并返回一些键。因此，我为options的语义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
          };
        })}
      />

我将状态提升到已定义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值更新为状态，但我也想将initialized值也更新为状态。因此，例如，在codesanbox中，如果您从下拉列表中选择slotId: 1，我还希望状态变量initialized用Y的值进行更新。

我正在努力从孩子那里获得initialized键，以更新其在父母中选择的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 react下拉键更新为状态

1 个答案: