React-select 的 selection 无法与 onChange 协同工作

Question

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

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

Select 如果 Select 1 有选项 'Other' selected.

，则 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，如果所有 selected 值中有一个值 'Other' .问题是我必须为每对 select 执行此操作，我必须有条件地 enable/disable 其中一个，这意味着我将不得不制作多个几乎相同的方法.

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

Answer 1

Select 1's options: A B C Other

Select 2 is not disabled if Select 1 has option 'Other' selected.

只需存储第一个 <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

React-select 的 selection 无法与 onChange 协同工作

React-select's selection not working together with onChange

reactjs

react-select