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

Question

我正在一个 React 应用程序中构建一个测验，我正在研究一个允许用户通过复选框选择多个选项的特定问题。到目前为止，对于其他只有单选按钮选项的问题，我已经能够将选定的答案设置为状态就好了。但是对于复选框的问题，我一直坚持如何做到这一点。每次选中或取消选中复选框时，我都需要更新状态。此复选框问题的代码是：

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 函数，但我不完全确定这是否正确或我需要如何更改它。任何帮助将不胜感激。

更新：

前两个 cmets 有所帮助。我想我很累哈哈。我看到这些项目正在添加到状态中，但有一点小故障：

所以我有 3 个复选框。我在 handleChange 函数中添加了console.log(checkedItems)，这样我就可以在控制台中观察行为了。

我进行第一次选择，控制台返回Object { } ...一个空对象，即使我选择了一个项目。我尝试选择第二个项目，控制台返回

{
  "Side": true
}

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

Answer 1

试试这个修复：

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

我不完全确定您的代码有什么问题，我觉得它没问题。但如果有任何问题，很可能您使用的库 "@baalspots/tmm-theme/src/components/quiz-checkbox" 行为不正常。

上述修复尝试减轻 lib 的不当行为。如果它没有帮助，那么您需要发布更多详细信息。究竟是什么坏了？任何错误信息？另外，您需要在某个地方（例如代码沙盒）发布您的代码在线游乐场的链接，以便人们可以进行实验。

Answer 2

啊，我想我现在已经调试到足以回答我自己的问题了。 handleChange 函数很好，我意识到我没有得到正确的控制台日志，因为我将 console.log() 放在了错误的位置。