更改我的 DropdownSection 组件时未设置下拉选项

Question

我有一个链接下拉列表，它更改包含一组选项的 DropdownSection 组件。

当我更改为不同的链接时，如果 linkOptions 数组中有多个选项，我想将 DropdownSection 的默认选项设置为第二个选项，因为我不想选择第一个“无选择”选项。例如。如果我选择链接2，它应该选择“三”选项。

目前，当我在 DropdownSection 中选择一个值，然后更改链接下拉列表时，所选选项为空。

例如加载应用程序后。第 1 项是默认选择的链接下拉列表：

在“链接”下拉列表中选择“链接 2”选项后：

如何设置默认选项的示例代码（使用包装 React Fluent UI Dropdown 组件的组件）：

<DropdownSection
  label={linkOptions[0].text}
  options={item1Options}
  defaultOptionText={item1Options.length > 1 ? item1Options[1].text : "No Selection"}
  defaultOptionValue={item1Options.length > 1 ? item1Options[1].value : "0"}
/>

应用程序：

const App = ({}) => {
  const linkOptions = [
    {
      text: "Link 1",
      value: "1",
    },
    {
      text: "Link 2",
      value: "2",
    },
    {
      text: "Link 3",
      value: "3",
    },
  ];

  const [link, setLink] = useState(linkOptions[0].value);

  const link1Options = [
    {
      text: "No Selection",
      value: "0",
    },
    {
      text: "One",
      value: "1"
    },
    {
      text: "Two",
      value: "2"
    },
  ];
  const link2Options = [
    {
      text: "No Selection",
      value: "0",
    },
    {
      text: "Three",
      value: "3"
    },
    {
      text: "Four",
      value: "4"
    },
  ];
  const link3Options = [
    {
      text: "No Selection",
      value: "0",
    },
    {
      text: "Five",
      value: "5"
    },
    {
      text: "Six",
      value: "6"
    },
  ];

  let linkDropdownSection = <></>;
  if (link === linkOptions[0].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[0].text}
        options={item1Options}
        defaultOptionText={item1Options.length > 1 ? item1Options[1].text : "No Selection"}
        defaultOptionValue={item1Options.length > 1 ? item1Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[1].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[1].text}
        options={item2Options}
        defaultOptionText={item2Options.length > 1 ? item2Options[1].text : "No Selection"}
        defaultOptionValue={item2Options.length > 1 ? item2Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[2].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[2].text}
        options={item3Options}
        defaultOptionText={item3Options.length > 1 ? item3Options[1].text : "No Selection"}
        defaultOptionValue={item3Options.length > 1 ? item3Options[1].value : "0"}
      />
    );
  }

  // @ts-ignore: next-line - Ignore event parameter
  const onLinkSelect: DropdownProps["onOptionSelect"] = (event: any, data: any) => {
    setLink(data.optionValue);
  };

  return (
    <>
      <main>
        {
          <section>
            <Dropdown
              defaultValue={linkOptions[0].text}
              defaultSelectedOptions={[linkOptions[0].value]}
              onOptionSelect={onLinkSelect}
            >
              {linkOptions.map((option) => (
                <Option key={`${optionId}-${option.value}`} value={option.value}>
                  {option.text}
                </Option>
              ))}
            </Dropdown>
            {linkDropdownSection}
          </section>
        }
      </main>
    </>
  );
};

下拉部分：

const DropdownSection = ({
  label,
  options,
  defaultOptionText,
  defaultOptionValue,
}) => {
  const optionId = useId("option");

  return (
    <section>
      <div>
        <Label>{label}</Label>
        <Dropdown
          defaultValue={defaultOptionText}
          defaultSelectedOptions={[defaultOptionValue]}
          onOptionSelect={onContactSelect}
        >
          {options.map((option) => (
            <FluentUIOption key={`${optionId}-${option.value}`} value={option.value}>
              {option.text}
            </FluentUIOption>
          ))}
        </Dropdown>
      </div>
      <Divider />
    </section>
  );
};

您可以看到

onLinkSelect

负责在调用

setLink

时更改链接下拉列表。

Answer 1

尝试将以下代码包装到 useMemo 中：

let linkDropdownSection = <></>;
  if (link === linkOptions[0].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[0].text}
        options={item1Options}
        defaultOptionText={item1Options.length > 1 ? item1Options[1].text : "No Selection"}
        defaultOptionValue={item1Options.length > 1 ? item1Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[1].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[1].text}
        options={item2Options}
        defaultOptionText={item2Options.length > 1 ? item2Options[1].text : "No Selection"}
        defaultOptionValue={item2Options.length > 1 ? item2Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[2].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[2].text}
        options={item3Options}
        defaultOptionText={item3Options.length > 1 ? item3Options[1].text : "No Selection"}
        defaultOptionValue={item3Options.length > 1 ? item3Options[1].value : "0"}
      />
    );
  }

并将第一个下拉列表的值传递给依赖项数组。例如

const componentRender = useMemo(() => {
  let linkDropdownSection = <></>;
  if (link === linkOptions[0].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[0].text}
        options={item1Options}
        defaultOptionText={item1Options.length > 1 ? item1Options[1].text : "No Selection"}
        defaultOptionValue={item1Options.length > 1 ? item1Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[1].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[1].text}
        options={item2Options}
        defaultOptionText={item2Options.length > 1 ? item2Options[1].text : "No Selection"}
        defaultOptionValue={item2Options.length > 1 ? item2Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[2].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[2].text}
        options={item3Options}
        defaultOptionText={item3Options.length > 1 ? item3Options[1].text : "No Selection"}
        defaultOptionValue={item3Options.length > 1 ? item3Options[1].value : "0"}
      />
    );
  }

return linkDropdownSelection;
}, [link])