Nyahtanda berbilang kotak pilihan dalam kumpulan kotak semak menggunakan cangkuk React

Question

Saya menjalankan beberapa kotak pilihan dalam beberapa kumpulan kotak pilihan. Saya tidak dapat memikirkan cara untuk menyahtanda (dengan itu menukar keadaan) kotak pilihan tertentu. Atas sebab tertentu saya tidak dapat mengakses e.target.checked.

<Kotak Semak
      saiz="kecil"
      nama={item}
      nilai={item}
      checked={checkboxvalues.includes(item)}
      onChange={(e) =>
  /></pra>
<p>dan fungsi saya</p>
<pre class="brush:php;toolbar:false;">const handleOnChange = (e) =>
   const check = e.target.checked;
   setChecked(!check);
};

Saya membuat contoh berfungsi bagi komponen dalam kotak pasir ini.

Answer 1

Begini cara saya melakukannya: https://codesandbox.io/s/elastic-pateu-flwqvp?file=/components/Selectors.js

Saya mengabstrak logik pemilihan menjadi useSelection()自定义钩子，这意味着当前选择可以在store[key].selected中找到，其中key可以是selectorssebarang kunci.

Setiap useSelection()调用中的items、selected、setSelected和sectionLabel都存储在store[key]中，并传递给一个<CustomCheckboxGroup /> komponen.

Bahagian yang berkaitan dialih keluar daripada nilai handleCheck函数，它根据先前选择的值设置新的选择：如果当前item包含在先前的selected dalam komponen. Jika tidak, tambahkannya.

---

Penjelasan yang lebih terperinci (mengapa)

Melihat kod anda dengan teliti, nampaknya anda keliru tentang cara komponen kotak pilihan dalam React berfungsi.

input的checked属性由一个booleanKawalan status. Contoh generik:

const Checkbox = ({ label }) => {
  const [checked, setChecked] = useState(false)
  return (
    <label>
      <input
        type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      <span>{label}</span>
    </label>
  )
}

Pada setiap paparan, acara <input />的checked值根据checked状态的当前值设置。当输入的checked发生变化（用户交互时），状态不会自动更新。但是onChange dimatikan dan kami menggunakannya untuk mengemas kini keadaan kepada nilai negatif nilai negeri sebelumnya.

---

Apabila berurusan dengan komponen <CheckboxList />, kami <CheckboxList />组件时，我们不能使用单个布尔值来控制所有复选框，我们需要为正在渲染的每个复选框设置一个布尔值。因此，我们创建一个selected数组，并将每个<input />的checked值设置为selected.includes(item)的值（返回一个boolean tidak boleh

menggunakan satu nilai boolean untuk mengawal

semua onChange事件中更新selected数组的值。我们检查item是否包含在先前版本的selected ​​kotak pilihan, kita perlu

em>Setiap kotak semakmenetapkan nilai boolean. Oleh itu, kami mencipta tatasusunan dipilih dan menetapkan nilai checked setiap <input /> kepada selected.includes Nilai daripada (item) (mengembalikan boolean).

Untuk ini berfungsi, kita perlu berada dalam setiap 🎜. Jika ada, tapiskannya. Jika ia tidak wujud, tambahkannya: 🎜

const CheckboxList = ({ items }) => {
  const [selected, setSelected] = useState([])
  const onChecked = (item) =>
    setSelected((prev) =>
      prev.includes(item)
        ? prev.filter((val) => val !== item)
        : [...prev, item]
    )

  return items.map((item) => (
    <label key={item}>
      <input
        type="checkbox"
        checked={selected.includes(item)}
        onChange={() => onChecked(item)}
      />
      <span>{item}</span>
    </label>
  ))
}

🎜Semoga ini dapat menyelesaikan beberapa masalah. 🎜

Answer 2

Anda perlu mencipta fungsi handleOnChange khusus untuk setiap kumpulan. Saya telah mencipta fungsi yang serupa untuk kumpulan kotak semak Genre dan anda boleh menciptanya untuk kumpulan lain dengan cara yang sama.

Ini ialah fungsi pemprosesan.

const handleOnChangeGenre = (e) => {
    let newValArr = [];
    if (e.target.checked) {
      newValArr = [...state.pillarGenre.split(","), e.target.value];
    } else {
      newValArr = state.pillarGenre
        .split(",")
        .filter((theGenre) => theGenre.trim() !== e.target.value);
    }
    setState({ ...state, pillarGenre: newValArr.join(",") });
  };

Lulus fungsi ini sebagai atribut handleOnChange kepada CustomCheckboxGroup seperti yang ditunjukkan di bawah.

<CustomCheckboxGroup
          checkboxdata={genres}
          checkboxvalues={state.pillarGenre}
          value={state.pillarGenre}
          sectionlabel="Genre"
          onToggleChange={handleGenreSwitch}
          togglechecked={genreswitch}
          handleOnChange={handleOnChangeGenre}
        />

Untuk ujian, ulas fungsi handleOnChange anda.

Lihat penyelesaian berfungsi lengkap dalam kotak pasir - Kod penuh