React-select 的选择不能与 onChange 一起使用答案

【问题标题】：React-select's selection not working together with onChangeReact-select 的选择不能与 onChange 一起使用
【发布时间】：2021-07-27 04:52:58
【问题描述】：

我遇到了一个小问题 - 我正在使用 React-select 的组件，这就是我想要做的 - 我有几对这样的组件，在每一对中必须禁用一个，除非第一个值包含某个值，例如：

选择 1 的选项：一种乙 C 其他

如果选择 1 选择了“其他”选项，则不会禁用选择 2。

我在一个大型功能组件中使用这些，想知道是否有一种简单的方法可以做到这一点。这是我迄今为止尝试过的：

Select 1:

    <Select
      isMulti={true}
      closeMenuOnSelect={false}
      options={options}
      getOptionLabel={(option) => option.name}
      getOptionValue={(option) => option}
      onChange={onChange}
      value={selected}
    />
    
Select 2:

    <Select
      isMulti={true}
      closeMenuOnSelect={false}
      options={options}
      getOptionLabel={(option) => option.name}
      getOptionValue={(option) => option}
      onChange={onChange}
      isDisabled={containsOther}
    />

Method for checking Select 1 selected values and setting them:

    let selected;
    
    const onChange = (data) => {
        console.log('on change = ' + JSON.stringify(data))
        selected = data
    }

然后我还会从 onChange 内部调用某种方法，将“containsOther”布尔值设置为 true，如果从所有选定的值中都有一个值“Other”。问题是我必须为每对选择执行此操作，我必须有条件地启用/禁用其中一个，这意味着我必须创建多个几乎相同的方法。

有没有一种简单的方法可以做到这一点，因为这看起来不干净？

【问题讨论】：

options 长什么样子？
Options 是一个像这样的简单数组： [ { "id": 1, "name": "A" } ]

标签： reactjs react-select

【解决方案1】：

选择 1 的选项：A B C 其他

如果选择 1 选择了“其他”选项，则不会禁用选择 2。

只需存储您的第一个 <Select /> 组件的选定选项 (selection)，然后过滤数组以查看是否选择了选项 "Other"。

你可以这样做：

const App = () => {
  const options = [
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 3, name: "C" },
    { id: 4, name: "Other" }
  ];

  const [selection, setSelection] = useState([]);

  const onChange = (data) => {
    console.log("on change = " + JSON.stringify(data));
    setSelection(data);
  };

  return (
    <div>
      <Select
        isMulti={true}
        closeMenuOnSelect={false}
        options={options}
        getOptionLabel={(option) => option.name}
        getOptionValue={(option) => option}
        onChange={onChange}
        value={selection}
      />
      <Select
        isDisabled={
          selection.filter((element) => element.name === "Other").length < 1
        }
        options={options}
        getOptionLabel={(option) => option.name}
        getOptionValue={(option) => option}
      />
    </div>
  );
};

一个活生生的例子：CodeSandbox

【讨论】：