Можем ли мы удалить одну из выбранных опций в программном обеспечении «реакция-выбор»?

Question

В реакции выбора https://github.com/jedwatson/react-select, можно ли программно удалить один из выбранных параметров в реакции выбора?

Например, на снимке экрана ниже я хочу отменить выбор red программно ?

Большое спасибо!

Answer 1

Вы можете сохранить выбранные параметры в состоянии и удалить выбранные путем обновления нового состояния, вы можете проверить здесь codeSandBox

import React, { useState } from "react";
import "./styles.css";
import Select from "react-select";

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

export default function App() {
  const [selectedOption, setSelect] = useState(null);
  const handleChange = selectedOption => {
    setSelect(selectedOption);
  };
  const removeOption = e => {
    const newSelect = selectedOption.filter(
      item => item.value !== e.target.name
    );
    setSelect(newSelect);
  };
  return (
    <>
      <Select
        isMulti
        value={selectedOption}
        onChange={handleChange}
        options={options}
      />
      <button name="chocolate" onClick={removeOption}>
        Remove Chocolate
      </button>
      <button name="vanilla" onClick={removeOption}>
        Remove Vanilla
      </button>
      <button name="strawberry" onClick={removeOption}>
        Remove Strawberry
      </button>
    </>
  );
}