如何将选中的项目设置为React状态数组

Question

如何将选中的项目设置为React状态数组

3

我正在构建一个React应用程序中的测验，并且正在处理一个让用户通过复选框选择多个选项的特定问题。到目前为止，对于其他仅有单选按钮选项的问题，我已经成功地将所选答案设置为状态。但是我卡在了如何处理具有复选框选项的问题上。我需要每次选中或取消选中复选框时更新state。这个复选框问题的代码如下：

import React, { useState, useEffect } from "react";
import { connect } from "frontity";
import { GridWrap, GridRow, GridColumn } from "emotion-flex-grid";
import QuizCheckbox from "/src/components/quiz-checkbox";

import QuestionCommonContainer from "../question-common.style";

const Question3 = ({ actions }) => {
  const [checkedItems, setCheckedItems] = useState({});

  const checkboxes = [
    {
      key: "checkBox1",
      label: "Back",
    },
    {
      key: "checkBox2",
      label: "Side",
    },
    {
      key: "checkBox3",
      label: "Stomach",
    },
  ];

  const handleChange = (event) => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked,
    });
  };

  return (
    <QuestionCommonContainer>
      <GridWrap>
        <GridColumn px={["l"]}>
          <GridRow wrap="wrap" justify="center">
            <GridColumn width={[12, 12, 12, 4]}>
              {checkboxes.map((item, id) => (
                <GridColumn pb={"l"} key={id}>
                  <QuizCheckbox
                    name={item.label}
                    label={<h5>{item.label}</h5>}
                    selected={checkedItems[item.label]}
                    onChange={handleChange}
                  />
                </GridColumn>
              ))}
            </GridColumn>
          </GridRow>
        </GridColumn>
      </GridWrap>
    </QuestionCommonContainer>
  );
};

export default connect(Question3);

我在思考是否需要修改handleChange函数，但我不确定这是否正确或者我需要如何更改。任何帮助都将不胜感激。

更新：

前两个评论帮了我很多。我想我已经非常疲惫了。我发现项目已添加到状态中，但有一个小故障：

所以我有3个复选框。我在handleChange函数中添加了console.log(checkedItems)，以便在控制台中查看行为。

我去选择我的第一个选项，控制台返回Object { }，即一个空对象，即使我已经选择了一个项目。我尝试选择第二个项目，控制台返回

{
  "Side": true
}

这是第二个选择。我不确定为什么第一个选择没有被包含在返回的对象中。

- bk___

我不明白问题出在哪里，代码看起来没问题。是哪一部分没有按照预期工作？ - hackape

1

我认为你的代码没有问题。这是一个简化版本的CodeSandbox，它可以正常工作-https://codesandbox.io/s/affectionate-fog-w4st6 - gerrod

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hackape · Answer 1

尝试这个修复方法：

const handleChange = (event) => {
    const name = event.target.name;
    setCheckedItems(prevState => ({
      ...prevState,
      [name]: !prevState[name],
    }));
  };

我不确定你的代码有什么问题，看起来没什么问题。但是如果出现了任何错误，很可能是你使用的库"@baalspots/tmm-theme/src/components/quiz-checkbox"没有正常工作。

上述修复尝试缓解库的错误行为。如果没有帮助，那么您需要发布更多详细信息。到底出了什么问题？有任何错误消息吗？此外，您需要在在线 playground 上发布您的代码链接，例如 codesandbox，以便其他人可以进行实验。

- bk___ · Answer 2

啊，我猜我已经调试了足够多的代码来回答自己的问题了。handleChange函数没问题，我意识到我没有得到正确的控制台日志是因为我把console.log()放错了位置。