javascript - 如何在按钮单击时清除反应选择值而不将其添加到选项中？

Question

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

我试过了

1. 使用状态来操作选项属性，但显然在调用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 链接

标签： javascriptreactjsreact-select

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>
  );
}