Claire de plusieurs réagir-sélectionnez

Question 1

J'ai un select:

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

Et j'ai un bouton pour effacer tous les sélectionne:

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

La fonction:

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

Cela fonctionne en supprimant et de vider le tableau, mais l'étiquette de la sélectionner reste. Comment puis-je effacer toutes les autres étiquettes de retour à l'espace réservé?

Question 2

Essayez cette approche,

J'ai créé deux états locaux ici. Un pour les options et les autres pour l'option sélectionnée. La mise à jour de l'état basé sur le bouton cliquez sur et les mêmes changements reflètent dans le modèle.

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

Laissez-moi savoir dans le cas où je ne suis pas couvrir votre cas d'utilisation.

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

Essayez cette approche,

J'ai créé deux états locaux ici. Un pour les options et les autres pour l'option sélectionnée. La mise à jour de l'état basé sur le bouton cliquez sur et les mêmes changements reflètent dans le modèle.

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

Laissez-moi savoir dans le cas où je ne suis pas couvrir votre cas d'utilisation.

Ressemble à ce qui fonctionne dans votre cas, je suis en train d'utiliser myRef.actuel.sélectionnez.clearValue() ... mais ce n'efface que la dernière sélectionnez (il y en a plusieurs) plutôt que de tout. Donc, je suis effectivement micropression le tableau, mais l'espace réservé reste

Claire de plusieurs réagir-sélectionnez

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie