React를 사용하여 체크박스의 선택된 값 가져오기

Question

체크박스의 선택된 값을 검색하여 배열에 저장하려고 합니다. 나는 다음을 시도했다:

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

그러나 이러한 값은 잘못된 유형이나 정의되지 않은 값을 반환합니다.

const [checkedItems, setCheckedItems] = useState([]);
const handlerChange = (e) =>
    if (e.target.checked) {
      var arr = [...checkedItems];
      //arr.push(setNewItem(e.target.value.checked));
      setCheckedItems(arr);
      console.log(arr);
    } 또 다른 {
      checkItems = "";
    }
    setIsChecked((현재) => !current);
  };

return (
    <div className="앱">
      <스타일양식>
        <스타일 입력
          유형="텍스트"
          자리 표시자="추가"
          값={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          onKeyPress={handleOnKeyPress}
        />
        <ButtonAddStyle onClick={() => addItem()}>추가</ButtonAddStyle>

        <StyleUl>
          {items.map((항목) => {
            반품 (
              <StyleLi key={item.id}>
                <StyleCheckBox
                  유형="체크박스"
                  값={isChecked}
                  onChange={handleChange}
                />
                {항목.값}
                {""}
                <ButtonDelStyle onClick={() => deleteItem(item.id)}>
                  엑스
                </ButtonDelStyle>
              </스타일리>
            );
          })}
        </StyleUl>
      </스타일양식>
    </div>
  );

Answer 1

이렇게 하면 문제가 해결될 수 있습니다.

으아악

Answer 2

으아악

는 다음을 제거하는 올바른 방법입니다:

으아악

이 방법으로는 상태를 업데이트할 수 없습니다. 입력 선택을 취소하려고 하면 오류가 나타납니다:

이제 무엇을 하고 싶은지 살펴보겠습니다. 입력을 선택할 때마다 저장됩니다 e.target.checked，所以checkedItems 다음과 같이 표시됩니다:

으아악

이게 왜 필요한가요? 더 나은 접근 방식은 선택한 항목의 ID를 저장하는 것입니다.

으아악

그런 다음 jsx에서:

으아악

이제 이것 좀 보세요:

으아악

정말로 필요하지 않은 items进行映射，创建多个复选框，但它们都共享相同的值。而复选框的值属性并不是你想象的那样，请在这里了解更多。所以你可以使用value={item.id}为每个输入设置一个唯一的值，并且可以摆脱isChecked의 useState 후크를 전달하고 있습니다.