Rumah  >  Soal Jawab  >  teks badan

Gunakan React untuk mendapatkan nilai kotak pilihan yang dipilih

<p>Saya cuba mendapatkan semula nilai kotak pilihan yang telah ditanda dan menyimpannya ke dalam tatasusunan. Saya cuba: </p> <pre class="brush:php;toolbar:false;">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); };</pre> <pre class="brush:php;toolbar:false;">return ( <div className="App"> <StyleForm> <StyleInput type="teks" pemegang tempat="Tambah" value={newItem} onChange={(e) => setNewItem(e.target.value)} onKeyPress={handleOnKeyPress} /> <ButtonAddStyle onClick={() => addItem()}>Add</ButtonAddStyle> <StyleUl> {items.map((item) => { kembali ( <Kunci StyleLi={item.id}> <StyleCheckBox type="kotak semak" value={isChecked} onChange={handleChange} /> {item.value} {""} <ButtonDelStyle onClick={() => deleteItem(item.id)}> X </ButtonDelStyle> </StyleLi> ); })} </StyleUl> </StyleForm> </div> );</pra>
P粉590929392P粉590929392435 hari yang lalu595

membalas semua(2)saya akan balas

  • P粉575055974

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

    balas
    0
  • P粉846294303

    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.

    balas
    0
  • Batalbalas