Use React to get the selected value of a checkbox

Question

I'm trying to retrieve the checked value of a checkbox and save it into an array. I tried:

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

But these return values ​​of the wrong type or undefined.

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);
    } else {
      checkedItems = "";
    }
    setIsChecked((current) => !current);
  };

return (
    <div className="App">
      <StyleForm>
        <StyleInput
          type="text"
          placeholder="Add"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          onKeyPress={handleOnKeyPress}
        />
        <ButtonAddStyle onClick={() => addItem()}>Add</ButtonAddStyle>

        <StyleUl>
          {items.map((item) => {
            return (
              <StyleLi key={item.id}>
                <StyleCheckBox
                  type="checkbox"
                  value={isChecked}
                  onChange={handleChange}
                />
                {item.value}
                {""}
                <ButtonDelStyle onClick={() => deleteItem(item.id)}>
                  X
                </ButtonDelStyle>
              </StyleLi>
            );
          })}
        </StyleUl>
      </StyleForm>
    </div>
  );

Answer 1

This may solve your problem.

const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
  setCheckedItems( prev => [...prev, e.target.checked]);
  setIsChecked((current) => !current);
};

Answer 2

arr.push(e.target.checked);

is the correct way to get rid of:

else {
checkedItems = "";
}

You cannot update status this way, and when you try to uncheck an input, an error will appear:

Now let's see what you want to do, every time an input is checked, you store e.target.checked, so checkedItems will look like this:

[true, true, true, true, true, true, true, true]

Why do you need this? A better approach is to store the id of the selected item:

const handleChange = (isChecked, id) => {
  var arr = [...checkedItems];
  if (isChecked) {
    arr.push(id);
    setCheckedItems(arr);
  } else {
    setCheckedItems(checkedItems.filter((storedId) => storedId !== id)); // 如果对应的输入未选中，则从checkedItems中删除id
  }
};

Then in jsx:

<StyleCheckBox
  type="checkbox"
  value={item.id}
  onChange={(e) => {
    handleChange(e.target.checked, item.id);
  }}
/>;

Now look at this:

<StyleCheckBox
  value={isChecked} // 这一行
>

You are mapping via items, creating multiple checkboxes, but they all share the same value. The value attribute of the checkbox is not what you think, please learn more in here. So you can use value={item.id} to set a unique value for each input, and get rid of the useState hook of isChecked, which you don't really need.