react-select

Question

在 react-select 中，当对两个下拉选项选项使用相同的数组时，如果已在另一个下拉列表中选择了其中一个选项，是否可以删除它？

我希望两个下拉菜单都显示所有 4 个国家/地区，但如果在一个下拉菜单中选择了一个国家/地区，则它不应显示在另一个下拉菜单中（除非从原始下拉菜单中删除).

这个真的让我摸不着头脑。

this.state.countries =

countries: [
  {
    label: "Italy",
    value: "Italy"
  },
  {
    label: "France",
    value: "France"
  },
  {
    label: "Belgium",
    value: "Belgium"
  },
  {
    label: "United Kingdom",
    value: "United Kingdom"
  }
];

双选：

<Select 
  options={countries}
  components={animatedComponents}
  isMulti
  closeMenuOnSelect={false}
  onChange={this.handleChange}
/>

<Select 
  options={countries}
  components={animatedComponents}
  isMulti
  closeMenuOnSelect={false}
  onChange={this.handleChange}
/>

删除所选选项使其不能在其他下拉列表中使用的功能？

handleChange = (selectedOption) => {

};

这不应该是可能的：选项应该共享，但在每个下拉列表中只能使用一次。

Answer 1

你需要在两个Select组件中使用受控模式（以控制options值），然后监听变化事件并过滤其他选项：

const Component = () => {
  const [options1, setOption1] = React.useState(options);
  const [options2, setOption2] = React.useState(options);

  return (
    <>
      <Select
        isMulti
        options={options1}
        onChange={(v1) => {
          setOption2(options.filter((o2) => !v1.includes(o2)));
        }}
      />
      <div style={{ height: 30 }} />
      <Select
        isMulti
        options={options2}
        onChange={(v2, a) => {
          setOption1(options.filter((o1) => !v2.includes(o1)));
        }}
      />
    </>
  );
};

react-select - 如何过滤 2 个选择之间的下拉选项？

react-select - How can I filter the dropdown options between 2 Selects?

reactjs