我正在try 检索复选框中选中的值并将它们保存到数组中. 我试过:

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

推荐答案

arr.push(e.target.checked);

这是一条可以让你摆脱的方式:

else {
checkedItems = "";
}

您不能以这种方式更新挂钩当您try 取消选中输入时会出现错误:

未捕获的TypeError:赋值为常量变量

现在让我们看看您正在try 做什么,您在每次选中输入时存储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)); // delete the id from checkedItems if the corresponding input is unckecked
  }
};

来自JSX的:

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

现在看看这个:

<StyleCheckBox
  value={isChecked} // this line
>

您正在映射items,创建多个复选框,但所有复选框都共享相同的值.并且复选框类型的输入的值属性不是您认为的那样,了解更多here.因此,您可以使用value={item.id} for each 输入指定一个唯一值,并go 掉isChecked个useState挂接您实际上并不需要它

Reactjs相关问答推荐

REACT路由DOM根据参数呈现不同的路由

如何在MUI X数据网格列中显示IMG?

如何用Reaction做交互式的MathML?

React中的useEffect钩子

如何使用useState响应快速/顺序状态更新

悬停轴时重新绘制自定义参照线

状态更改是否卸载功能组件

关于forwardRef,我可以';我不理解第二个用例

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能?

React 无效的钩子调用:如何避免嵌套钩子?

Chakra UI:如何在选中状态下设置复选框 colored颜色

useRef 不关注模态

如何根据用户在react.js中的 Select , Select 多个心形图标?

BrowserRouter改变了URL但没有链接到页面

react 测试库不测试包含 react 路由 dom V6 的组件

自动重新获取不起作用 - RTK 查询

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

是什么导致了这个令人惊讶的数组导致 React

为什么我在运行一些 npm react 命令时会收到这些警告?

axios post方法中的请求失败,状态码为500错误