Gunakan React untuk mendapatkan nilai kotak pilihan yang dipilih

Question

Saya cuba mendapatkan semula nilai kotak pilihan yang telah ditanda dan menyimpannya ke dalam tatasusunan. Saya cuba:

arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(item.disemak)</pra>
<p>Tetapi ini mengembalikan nilai jenis yang salah atau tidak ditentukan. </p>
<pre class="brush:php;toolbar:false;">const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) =>
    if (e.target.checked) {
      var arr = [...checkedItems];
      //arr.push(setNewItem(e.target.value.checked));
      setCheckedItems(arr);
      console.log(arr);
    } lain {
      checkedItems = "";
    }
    setIsChecked((semasa) => !semasa);
  };

return (
    

      
         setNewItem(e.target.value)}
          onKeyPress={handleOnKeyPress}
        />
         addItem()}>Add

        
          {items.map((item) => {
            kembali (
              
                
                {item.value}
                {""}
                 deleteItem(item.id)}>
                  X
                
              
            );
          })}
        
      
    
  );            

Answer 1

Ini boleh menyelesaikan masalah anda.

const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
  setCheckedItems( prev => [...prev, e.target.checked]);
  setIsChecked((current) => !current);
};

Answer 2

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.