React を使用してチェックボックスの選択された値を取得する
P粉590929392
2023-09-02 22:36:49
<p>チェックボックスのチェックされた値を取得して配列に保存しようとしています。
私は試してみました: </p>
<pre class="brush:php;toolbar:false;">arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(items.checked)</pre>
<p>しかし、これらは間違った型または未定義の値を返します。 </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);
コンソール.ログ(arr);
} それ以外 {
selectedItems = "";
}
setIsChecked((現在) => !現在);
};</pre>
<pre class="brush:php;toolbar:false;">return (
<div className="アプリ">
<スタイルフォーム>
<スタイル入力
type="テキスト"
placeholder=「追加」
値={新しいアイテム}
onChange={(e) => setNewItem(e.target.value)}
onKeyPress={handleOnKeyPress}
/>
<ButtonAddStyle onClick={() => addItem()}>追加</ButtonAddStyle>
<スタイルウル>
{items.map((アイテム) => {
戻る (
<StyleLi key={item.id}>
<スタイルチェックボックス
type="チェックボックス"
値={チェック済み}
onChange={ハンドル変更}
/>
{アイテム.値}
{""}
<ButtonDelStyle onClick={() => deleteItem(item.id)}>
バツ
</ButtonDelStyle>
</StyleLi>
);
})}
</StyleUl>
</スタイルフォーム>
</div>
);</pre>
これで問題が解決するかもしれません。
リーリーリーリー
は、
を削除する正しい方法です。 リーリーこの方法ではステータスを更新できません。入力のチェックを外そうとすると、次のエラーが表示されます:
さあ、何をしたいのか見てみましょう。入力がチェックされるたびに、
リーリーe.target.checked
を保存します。したがって、checkedItems
は次のようになります。なぜこれが必要なのですか?より良い方法は、選択したアイテムの ID を保存することです:
リーリー次に、jsx で:
リーリーさあ、これを見てください:
リーリーitems
を介してマッピングし、複数のチェックボックスを作成していますが、それらはすべて同じ値を共有しています。チェックボックスの value 属性はあなたが考えているものと異なります。詳細については、ここを参照してください。したがって、value={item.id}
を使用して各入力に一意の値を設定し、実際には必要のないisChecked
の useState フックを削除できます。