reactjs - 在 react-select 向下钻取菜单中显示最后可用的选项

Question

我正在使用 react-select 包构建一个向下钻取菜单。目标是创建多个级别并引导用户找到正确的选项（逐步）。

我想向用户显示最后可用的选项，而不是“无选项页面”。

所以如果你点击target 1-> sub item 1->sub item nested 1菜单应该关闭。如果用户再次打开菜单，用户应该有选项：sub item nested 1 而sub item nested 2不是No options页面。

function SingleSelect() {
  const [selectOptions, setSelectOptions] = useState({
    isMenuOpen: false,
    closeMenuOnSelect: false,
    renderValue: false,
    options
  });

  function handleOptionClick(e, props) {
    e.stopPropagation();
    e.preventDefault();

    const nestedGroup = props.data.sub_items;

    if (nestedGroup) {
      setSelectOptions({
        options: nestedGroup,
        closeMenuOnSelect: false,
        renderValue: false,
        isMenuOpen: true
      });
    }

    if (!nestedGroup) {
      setSelectOptions({
        closeMenuOnSelect: true,
        renderValue: true,
        isMenuOpen: false
      });
    }
  }

  function Option(props) {
    return (
      <div onClick={(e) => handleOptionClick(e, props)}>
        <components.Option {...props} isSelected={false} />
      </div>
    );
  }

  return (
    <Select
      name="options"
      classNamePrefix
      components={{ Option }}
      closeMenuOnSelect={selectOptions.closeMenuOnSelect}
      menuisOpen={selectOptions.isMenuOpen}
      controlShouldRenderValue={selectOptions.renderValue}
      isSearchable={false}
      options={selectOptions.options}
    />
  );
}

Codesandbox 中的示例：https ://codesandbox.io/s/multi-level-react-select-13rtk?file=/index.js

标签： reactjsreact-select