使用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);
      console.log(arr);
    } else {
      checkedItems = "";
    }
    setIsChecked((current) => !current);
  };

return (
    <div className="App">
      <StyleForm>
        <StyleInput
          type="text"
          placeholder="加"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          onKeyPress={handleOnKeyPress}
        />
        <ButtonAddStyle onClick={() => addItem()}>加</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

這可能解決您的問題。

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

Answer 2

arr.push(e.target.checked);

是正確的方法，可以擺脫：

else {
checkedItems = "";
}

你不能用這種方式更新狀態，當你嘗試取消選取一個輸入時，會出現錯誤：

現在讓我們看看你想做什麼，每次選取一個輸入時，你都儲存了e.target.checked，所以checkedItems會變成這樣：

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

你為什麼需要這個？更好的做法是儲存選取項目的id：

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

然後在jsx中：

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

現在看看這個：

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

你正在透過items進行映射，建立多個複選框，但它們都共享相同的值。而複選框的值屬性並不是你想像的那樣，請在這裡了解更多。所以你可以使用value={item.id}為每個輸入設定一個唯一的值，並且可以擺脫isChecked的useState hook，你真的不需要它。