Wyczyść wieloskładnikową odpowiedź-wybierz

Question 1

Mam do wyboru:

<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">

I u mnie jest przycisk, który musi oczyścić wszystkie wybrane:

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

Funkcja:

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

To działa na zasadzie usuwania i oczyszczania tablicy, ale znacznik wyboru pozostaje. Jak wyczyścić wszystkie pozostałe znaczniki z powrotem do zastępczy?

Question 2

Spróbuj ten podejście,

Założyłem tutaj dwa lokalnych stanu. Jeden dla parametrów, a drugi dla wybranego parametru. Aktualizacja stanu na podstawie naciśnięciu przycisku, i te same zmiany będą widoczne w szablonie.

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

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

Daj mi znać, jeśli nie oświetlania twój przypadek użycia.

Sarun UK · Answer 1 · 2021-11-24T08:07:36

Spróbuj ten podejście,

Założyłem tutaj dwa lokalnych stanu. Jeden dla parametrów, a drugi dla wybranego parametru. Aktualizacja stanu na podstawie naciśnięciu przycisku, i te same zmiany będą widoczne w szablonie.

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

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

Daj mi znać, jeśli nie oświetlania twój przypadek użycia.

Wygląda na to, że to zadziała w twoim przypadku, staram się korzystać z myRef.current.select.ClearValue() ... ale to usuwa tylko ostatni wybór (jest ich kilka), a nie wszystkie. W ten sposób, że praktycznie обнуляю tablicy, ale zastępczy wciąż pozostaje

Wyczyść wieloskładnikową odpowiedź-wybierz

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii