Jasné více reagovat-vyberte

Question 1

Mám vybrat:

<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 mám tlačítko, které je vymazat všechny vybere:

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

Funkce:

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

To funguje tak, že vyjmutí a vyprázdnění pole, ale na štítku vyberte zůstává. Jak mohu vymazat všechny zbývající štítky zpět na zástupný symbol?

Question 2

Zkuste tento přístup,

Vytvořil jsem dva místní státy. Jeden pro volby a druhé pro vybranou možnost. Aktualizace stavu na základě tlačítko klepněte na tlačítko a stejné změny se odrážejí v šabloně.

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

Dejte mi vědět, v případě, že nejsem pokrývající váš případ použití.

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

Zkuste tento přístup,

Vytvořil jsem dva místní státy. Jeden pro volby a druhé pro vybranou možnost. Aktualizace stavu na základě tlačítko klepněte na tlačítko a stejné změny se odrážejí v šabloně.

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

Dejte mi vědět, v případě, že nejsem pokrývající váš případ použití.

Vypadá to, že to bude fungovat ve vašem případě, já se snažím používat myRef.aktuální.vyberte.clearValue() ... ale to jen vymaže poslední výběr (existuje více), nikoli všechny. Takže jsem efektivně nulling pole, ale zástupný symbol stále zůstává

Jasné více reagovat-vyberte

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii