如何在单击按钮时清除 react-select 值而不将其添加到选项中？

Question

我正在使用 react-select，我想在单击按钮时清除所选值而不将其添加到 options 属性

我试过了

使用状态来操纵选项属性，但显然在调用 clearValue() 方法时，默认情况下会自动推送到选项数组。

问题

如何告诉 react-select 只清除所选值而不将其添加到选项数组中的任何位置？

import React, { useRef } from "react";
import Select from "react-select";

export default function App() {
  const selectInputRef = useRef();

  const onClear = () => {
    selectInputRef.current.select.clearValue();
  };

  return (
    <div className="App">
      <h1>Select Gender</h1>
      <Select
        isMulti
        ref={selectInputRef}
        options={[
          { value: "male", label: "Male" },
          { value: "female", label: "Female" }
        ]}
      />
      <button onClick={onClear}>Clear Value</button>
    </div>
  );
}

这是我的CodeSandbox Link

Answer 1

您需要自己管理所选值和选项的状态并相应地对其进行操作：

export default function App() {
  const [selected, setSelected] = useState([]);
  const [options, setOptions] = useState([
    { value: "male", label: "Male" },
    { value: "female", label: "Female" }
  ]);

  const handleClear = () => {
    setOptions((currentOptions) => currentOptions.filter((currentOption) => !selected.includes(currentOption)));
    setSelected([]);
  };

  return (
    <div className="App">
      <h1>Select Gender</h1>
      <Select isMulti value={selected} options={options} onChange={setSelected} />
      <button onClick={handleClear}>Clear Value</button>
    </div>
  );
}

如何在单击按钮时清除 react-select 值而不将其添加到选项中？

How to clear react-select values on button click without adding it to options?

javascript

reactjs

react-select