ชัดเจนหลายตอบโต้เลือก

ลองนี้มากครับ

ฉันต้องสร้างสองอเมริกาท้องถิ่นอยู่ที่นี่ หนึ่งสำหรับตัวเลือกและอีกคนสำหรับคอนที่เลือกไว้ออกตัวเลือก. กำลังปรับปรุงรัฐดูจากคลิกที่ปุ่มเดียวกันเปลี่ยนแปลงจะได้ไตร่ตรองในต้นแบบ.

import { IconButton } from "@material-ui/core";
import { useState } from "react";
import Select from "react-select";

import "./styles.css";

const opts = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

export default function App() {
  const [options, setOptions] = useState(opts);
  const [selected, setSelected] = useState(opts[0]);
  const handleRemoveFieldsAll = (event) => {
    setSelected(null);
    setOptions([]);
  };

  const handleInputChange2 = (option) => {
    setSelected(option);
  };

  const handlePopulateFieldsAll = () => {
    setSelected(opts[0]);
    setOptions(opts);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Select
        isClearable
        classNamePrefix="select"
        // ref={myRef}
        menuPortalTarget={document.body}
        // styles={style}
        placeholder="Select Foods"
        name="Foods"
        value={selected}
        options={options}
        onChange={(event) => handleInputChange2(event)}
        className="select selectNarrow"
      ></Select>

      <IconButton
        size="small"
        aria-label="edit"
        onClick={() => handleRemoveFieldsAll()}
      >
        Reset all
      </IconButton>

      <IconButton
        size="small"
        aria-label="edit"
        onClick={() => handlePopulateFieldsAll()}
      >
        Populate all
      </IconButton>
    </div>
  );
}

CODESANDBOX- https://codesandbox.io/s/intelligent-moore-nn8w5?file=/src/App.js:0-1483

บอกให้ฉันรู้ในกรณีที่ฉันไม่ใช่ใบบัวมาปิดไม่มิดหรอกใช้กรณีนี้