React を使用してチェックボックスの選択された値を取得する

Question

チェックボックスのチェックされた値を取得して配列に保存しようとしています。 私は試してみました:

arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(items.checked)

しかし、これらは間違った型または未定義の値を返します。

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((現在) => !現在);
  };

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

Answer 1

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

リーリー

Answer 2

リーリー

は、

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

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

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

リーリー

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

リーリー

次に、jsx で:

リーリー

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

リーリー

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