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

重置多选下拉菜单反应

1 个答案: