如何从 React Select 选项中排除一些选项

Question

我有大约 50 个选项要显示在反应 select 选项中。但是我想排除一些具有逻辑的选项到已经发布的值。目的是，我们有一个表单，我们可以从下拉列表中添加值。如果添加了一项，则不必在下拉列表中显示该项目。

重构代码：

export default function App() {
  const choices = [
    {
      value: 0,
      label: "Container empty to shipper"
    },
    {
      value: 1,
      label: "Container pickup at shipper"
    },
    {
      value: 2,
      label: "Container arrival at first POL (Gate in)"
    },
    {
      value: 3,
      label: "Container loaded at first POL"
    }
  ];

  const postedList = [
    "Container empty to shipper",
    "Container pickup at shipper"
  ];
  return (
    <div className="App">
      <h1>Select Box</h1>
      <Select
        isClearable={false}
        // here the choices should be 2 eliminating the other 2 whose labels are matching to postedlist 
        options={choices}
        defaultValue={choices[0]}
        onChange={(choice) => console.log(choice.value)}
      />
    </div>
  );
}

目前，它呈现所有 4 个选项，但我只想 return 其中 2 个标签与 postedlist

不匹配

我也创造了Codesandbox。如果你想在那里看到它。

Answer 1

您可以使用 Array.prototype.filter() and Array.prototype.includes() 过滤掉已发布的项目。然后使用 filteredList 作为 Select 组件的输入，如下所示。

  const filteredList = choices.filter(({ label }) =>
    !postedList.includes(label)
  );

  return (
    <div className="App">
      <h1>Select Box</h1>
      <Select
        isClearable={false}
        options={filteredList}
        defaultValue={filteredList[0]}
        onChange={(choice) => console.log(choice.value)}
      />
    </div>
  );

Answer 2

您可以动态 filter 项并使用 includes 方法排除它们。

    <Select
    options = {choices.filter((choice) => !postedList.includes(choice.label))}
    ...
    />

如何从 React Select 选项中排除一些选项

How to exclude some options from React Select options

reactjs

react-select