我正在 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/