重置多选下拉菜单反应

Question

我在表单中使用 multiselect-dropdown-react，我的问题是，如何重置多选字段，我的意思是带有选项的输入？因为我真的看过文档，找不到重置的方法，所以整个表单都重置了，除了多选。

const multiselectRef = useRef();

    function resetValues() {
   multiselectRef.resetSelectedValues();
  }

  <Multiselect
    options={props.categories}
    displayValue="name"
    onSelect={handlerOnChangeCategory}
    onRemove={handlerOnChangeCategory}
    ref={resetValues}
   />

谢谢，谢谢

Answer 1

如果我理解正确，您想在某些操作上重置多选。你可以这样做：

import React, { useState, useRef } from "react";
import { Multiselect } from "multiselect-react-dropdown";

import "./styles.css";

export default function App() {
  const [options] = useState([
    { name: "Srigar", id: 1 },
    { name: "Sam", id: 2 }
  ]);
  const multiselectRef = useRef();

  const resetSelectField = () => {
    multiselectRef.current.resetSelectedValues();
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Multiselect
        options={options} // Options to display in the dropdown
        displayValue="name" // Property name to display in the dropdown options
        ref={multiselectRef}
      />
      <button onClick={resetSelectField}>Reset</button>
    </div>
  );
}

这里是演示：https://codesandbox.io/s/infallible-sound-3ek6n?file=/src/App.js:0-786