Очистить множественную реакцию-выберите

0

Вопрос

У меня есть выбор:

<Select isClearable classNamePrefix="select" ref={myRef} menuPortalTarget={document.body} styles={style} placeholder="Select Foods" name="Foods" value={inputField.foods} options={options} onChange={event => handleInputChange2(index, event)} className="select selectNarrow">

И у меня есть кнопка, которая должна очистить все выбранные:

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

Функция:

const handleRemoveFieldsAll = (index, event) => {
    const values = [...inputFields];
    setInputFields(INITIAL_STATE);
    values.splice(0);
    console.log(values);
  };

Это работает путем удаления и очистки массива, но метка выбора остается. Как очистить все оставшиеся метки обратно в заполнитель?

react-select reactjs
2021-11-24 06:38:37
1

Лучший ответ

0

Попробуйте этот подход,

Я создал здесь два местных штата. Один для параметров, а другой для выбранного параметра. Обновление состояния на основе нажатия кнопки, и те же изменения будут отражены в шаблоне.

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

КОДОВЫЙ ЯЩИК - https://codesandbox.io/s/intelligent-moore-nn8w5?file=/src/App.js:0-1483

Дайте мне знать, если я не освещаю ваш вариант использования.

2021-11-24 08:07:36

Похоже, это сработает в вашем случае, я пытаюсь использовать myRef.current.select.ClearValue() ... но это удаляет только последний выбор (их несколько), а не все. Таким образом, я фактически обнуляю массив, но заполнитель все еще остается
Paul VI

На других языках

Эта страница на других языках

Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................