使用React的方法来获取复选框中已选中的值-PHP中文网问答

我正在尝试检索复选框的选中值并将其保存到数组中。我尝试了：

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

全部回复(2)

P粉5750559742023-09-03 21:41:47 2楼

这可能解决您的问题。

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

赞 +0

添加回复

P粉8462943032023-09-03 13:52:59 1楼

arr.push(e.target.checked);

是正确的方法，可以摆脱：

else {
checkedItems = "";
}

你不能用这种方式更新状态，当你尝试取消选中一个输入时，会出现错误：

现在让我们看看你想做什么，每次选中一个输入时，你都存储了e.target.checked，所以checkedItems会变成这样：

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

你为什么需要这个？更好的做法是存储选中项的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，你真的不需要它。