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

标签 javascript reactjs

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

更新:

前两条评论很有帮助。我觉得我很累哈哈。我看到项目正在添加到状态,但有一点小故障:

所以我有 3 个复选框。我将 console.log(checkedItems) 添加到 handleChange 函数中,以便我可以在控制台中观察行为。

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

{
  "Side": true
}

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

最佳答案

试试这个修复:

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

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

上述修复尝试减轻 lib 的不当行为。如果没有帮助,那么您需要发布更多详细信息。究竟是什么东西坏了?任何错误信息?另外,您需要发布指向您在某处编写代码的在线 Playground 的链接,例如 codesandbox,以便人们可以进行实验。

关于javascript - 如何将选中的项目设置为 React 状态数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64601311/

相关文章:

node.js - 尝试导入错误 : 'createLocation' is not exported from 'history'

reactjs - 无法在react-native-web 上运行webpack-dev-server。错误: You may need an appropriate loader to handle this file type

javascript - 重定向似乎不可靠

javascript - Jtable ajax 帖子不工作

javascript - 如何使用Javascript显示选择选项的值

javascript - 在 Javascript VM 之上编写另一种语言?

reactjs - enzyme 发现无法在已经变浅的组件中找到组件

javascript - 如何将计算的可观察对象添加到 knockoutjs 映射

javascript - JavaScript 中数组元素默认有名称吗?

javascript - 你什么时候可以在react中使用reactDOM/我怎样才能让某些东西出现在屏幕上而不是consoke中?