Jasné viac reagovať-vyberte,

Question 1

Mám vybrať:

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

A ja máme tlačidlo, ktoré je vyčistiť všetky vyberie:

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

Funkcia:

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

Funguje to odstránením a vyprázdňovanie pole, ale etikete vyberte zostáva. Ako môžem vymazať všetky zostávajúce štítky späť na zástupný symbol?

Question 2

Skúste tento prístup,

Vytvoril som dve miestne štátov tu. Jeden pre voľby a iné pre vybranú možnosť. Aktualizácia štát založený na tlačidlo a rovnaké zmeny sa odrážajú v šablóne.

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

Dajte mi vedieť v prípade, že nie som vzťahujú na vaše používanie prípade.

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

Skúste tento prístup,

Vytvoril som dve miestne štátov tu. Jeden pre voľby a iné pre vybranú možnosť. Aktualizácia štát založený na tlačidlo a rovnaké zmeny sa odrážajú v šablóne.

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

Dajte mi vedieť v prípade, že nie som vzťahujú na vaše používanie prípade.

Vyzerá to bude fungovať vo vašom prípade, snažím sa používať myRef.aktuálny.zvoľte položku.clearValue() ... ale to len vymaže posledný vyberte položku (je ich viac), nie však všetky. Tak som účinne nulling pole, ale text je stále

Jasné viac reagovať-vyberte,

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii