Rumah > Soal Jawab > teks badan
P粉5750559742023-09-03 21:41:47
Ini boleh menyelesaikan masalah anda.
const [checkedItems, setCheckedItems] = useState([]); const handleChange = (e) => { setCheckedItems( prev => [...prev, e.target.checked]); setIsChecked((current) => !current); };
P粉8462943032023-09-03 13:52:59
arr.push(e.target.checked);
adalah cara yang betul untuk menghilangkan:
else { checkedItems = ""; }
Anda tidak boleh mengemas kini status dengan cara ini, apabila anda cuba menyahtanda input, ralat akan muncul:
Sekarang mari lihat apa yang anda mahu lakukan, setiap kali anda memilih input yang anda simpan e.target.checked
,所以checkedItems
ia akan kelihatan seperti ini:
[true, true, true, true, true, true, true, true]
Kenapa anda perlukan ini? Pendekatan yang lebih baik ialah menyimpan id item yang dipilih:
const handleChange = (isChecked, id) => { var arr = [...checkedItems]; if (isChecked) { arr.push(id); setCheckedItems(arr); } else { setCheckedItems(checkedItems.filter((storedId) => storedId !== id)); // 如果对应的输入未选中,则从checkedItems中删除id } };
Kemudian dalam jsx:
<StyleCheckBox type="checkbox" value={item.id} onChange={(e) => { handleChange(e.target.checked, item.id); }} />;
Sekarang lihat ini:
<StyleCheckBox value={isChecked} // 这一行 >
Anda lulus cangkuk useState items
进行映射,创建多个复选框,但它们都共享相同的值。而复选框的值属性并不是你想象的那样,请在这里了解更多。所以你可以使用value={item.id}
为每个输入设置一个唯一的值,并且可以摆脱isChecked
, yang anda benar-benar tidak perlukan.