react-select：当您没有搜索选项时自动建议“其他”选项

问题描述

我的表单上有一个可搜索的下拉字段，用户可以在其中进行研究并正常选择。

我需要的是，如果他输入了一个不存在的选项，建议他选择“其他”选项。

“其他”选项已经存在，我只是不知道如何自动建议它。

我已经看到了 noOptionsMessage，但它对我没有用，我需要您自动建议该选项。

你能帮我吗？谢谢。

解决方法

有一个名为 filterOption 的道具可以自定义您希望在用户输入时如何过滤您的选项，但它只能过滤一个选项并且缺少其他选项的上下文。

因此，要在没有可用选项时显示“其他”选项，您必须：

• 禁用默认选项过滤器，以免干扰您的自定义过滤器。
• 控制选项状态。
• 根据用户类型过滤掉选项并更新选项状态。

下面是一个例子来说明我的意思：

import Select,{ createFilter } from "react-select";

const filterOption = createFilter({});

const allOptions = [
  { value: "chocolate",label: "Chocolate" },{ value: "strawberry",label: "Strawberry" },{ value: "vanilla",label: "Vanilla" }
];
const otherOption = { value: "other",label: "Other" };

export default function App() {
  const [options,setOptions] = useState(allOptions);
  const filterAllOptions = (rawInput: string) => {
    const filteredOptions = allOptions.filter((o) => filterOption(o,rawInput));

    if (filteredOptions.length === 0) {
      filteredOptions.push(otherOption);
    }

    setOptions(filteredOptions);
  };

  return (
    <Select
      options={options}
      filterOption={() => true} // disable the default option filter
      onInputChange={(e) => filterAllOptions(e)}
    />
  );
}

现场演示