React を使用してチェックボックスの選択された値を取得する
P粉590929392
P粉590929392 2023-09-02 22:36:49
0
2
616
<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>
P粉590929392
P粉590929392

全員に返信(2)
P粉575055974

これで問題が解決するかもしれません。

リーリー
いいねを押す +0
P粉846294303

リーリー

は、

を削除する正しい方法です。 リーリー

この方法ではステータスを更新できません。入力のチェックを外そうとすると、次のエラーが表示されます:

さあ、何をしたいのか見てみましょう。入力がチェックされるたびに、e.target.checked を保存します。したがって、checkedItems は次のようになります。

リーリー

なぜこれが必要なのですか?より良い方法は、選択したアイテムの ID を保存することです:

リーリー

次に、jsx で:

リーリー

さあ、これを見てください:

リーリー

items を介してマッピングし、複数のチェックボックスを作成していますが、それらはすべて同じ値を共有しています。チェックボックスの value 属性はあなたが考えているものと異なります。詳細については、ここを参照してください。したがって、value={item.id} を使用して各入力に一意の値を設定し、実際には必要のない isChecked の useState フックを削除できます。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート