Çoklu reaksiyonu temizle-seç

Question 1

Bir seçeneğim var:

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

Ve tüm seçimleri temizlemek için bir düğmem var:

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

İşlev:

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

Bu, diziyi kaldırarak ve boşaltarak çalışır, ancak seçimin etiketi kalır. Kalan tüm etiketleri yer tutucuya nasıl geri temizlerim?

Question 2

Bu yaklaşımı deneyin,

Burada iki yerel eyalet yarattım. Biri seçenekler için diğeri seçili seçenek için. Düğme tıklamasına bağlı olarak durumu güncellemek ve aynı değişiklikler şablona yansıtılacaktır.

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

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

Kullanım durumunuzu karşılamama ihtimaline karşı bana bildirin.

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

Bu yaklaşımı deneyin,

Burada iki yerel eyalet yarattım. Biri seçenekler için diğeri seçili seçenek için. Düğme tıklamasına bağlı olarak durumu güncellemek ve aynı değişiklikler şablona yansıtılacaktır.

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

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

Kullanım durumunuzu karşılamama ihtimaline karşı bana bildirin.

Bu senin durumunda işe yarayacak gibi görünüyor, myref'i kullanmaya çalışıyorum.şimdiki.seçmek.clearValue() ... ancak bu, tümü yerine yalnızca son seçimi (birden çok var) temizler. Bu yüzden diziyi etkin bir şekilde geçersiz kılıyorum ancak yer tutucu hala kalıyor

Çoklu reaksiyonu temizle-seç

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride