如何在React状态下处理多个复选框:多个数组

Question

伙计们，我刚刚在这里使用了Shahnawaz的例子，在State:Array中处理多个Checkboxed。如何？但是，例如，当单击具有相同项目的名称/类别时，如果使用多个true ID，则当选中===true时，将为两个类别提供重复的project1和project2。。。。。

checked1(英语===true(会给你项目1，项目2checked2(数学==true(会给你项目1，项目3再次检查4项目1，项目2重复

关于如何解决这个问题有什么想法吗？

import React from "react";
const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => (
<input type={type} name={name} checked={checked} onChange={onChange} />
);
const checkboxes = [
{
id: "31",
category: "englsh",
projects: [
{
id: "9",
},
],
},
{
id: "32",
category: "maths",
projects: [
{
id: "2",
},
],
},
{
id: "33",
category: "marketing",
projects: [
{
id: "2",
},
],
},
{
id: "34",
category: "physics",
projects: [
{
id: "2",
},
],
},
{
id: "35",
category: "media ",
projects: [
{
id: "2",
},
{
id: "10",
},
],
},
{
id: "36",
category: "science",
projects: [
{
id: "9",
},
{
id: "11",
},
],
},
];
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedItems: new Map(),
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const item = e.target.name;
const isChecked = e.target.checked;
console.log(item);
console.log(isChecked);
this.setState((prevState) => ({
checkedItems: prevState.checkedItems.set(item, isChecked),
}));
}
render() {
return (
<div className="row float-center d-flex justify-content-center">
{checkboxes.map((item) => (
<label key={item.key} className="m-3">
<Checkbox
name={item.name}
checked={this.state.checkedItems.get(item.name)}
onChange={this.handleChange}
/>
{item.name}
</label>
))}
</div>
);
}
}

Answer 1

如果您希望name下的密钥显示在标签上，请通过执行Object.keys(item.name)[0]而不是item.name来提取密钥。此外，传递一个额外的属性(此处为index(，以便您可以根据正确的索引从checkboxes数组中打印所需的值。在这里，我已经使用event.target完成了这项工作。

Update:

如果您想要唯一的值，只需声明一个状态，就可以将项添加到该数组中(选中时(，并从该数组中删除项(未选中时(。最后，把你的数组放在一个集合里，你就完成了。使用Array.from()将集合转换为数组。

这是工作代码：

import React from "react";
const Checkbox = ({
type = "checkbox",
name,
index,
checked = false,
onChange,
}) => (
<input
type={type}
name={name}
data-index={index}
checked={checked}
onChange={onChange}
/>
);
const checkboxes = [
{
name: { english: ["project1", "project2"] },
key: "1",
label: "1",
},
{
name: { maths: ["project1", "project3"] },
key: "2",
label: "2",
},
{
name: { physics: ["project4", "project5"] },
key: "3",
label: "3",
},
{
name: { marketing: ["project1", "project2"] },
key: "4",
label: "4",
},
];
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedItems: new Map(),
checkedArrays: [],
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const item = e.target.name;
const isChecked = e.target.checked;
let [key, value] = Object.entries(
checkboxes[e.target.dataset.index].name
)[0];
console.log(isChecked);
console.log(key);
var len = value.length;
if (isChecked) {
for (var i = 0; i < len; i++) {
this.state.checkedArrays.push(value[i]);
}
} else {
for (var i = 0; i < len; i++) {
const index = this.state.checkedArrays.indexOf(value[i]);
if (index > -1) {
this.state.checkedArrays.splice(index, 1); // 2nd parameter means remove one item only
}
}
}
this.setState((prevState) => ({
checkedItems: prevState.checkedItems.set(item, isChecked),
}));
console.log("Duplicated array");
console.log(this.state.checkedArrays);
var uniqueArray = Array.from(new Set(this.state.checkedArrays));
console.log("Unique array");
console.log(uniqueArray);
}
render() {
return (
<div className="row float-center d-flex justify-content-center">
{checkboxes.map((item, index) => (
<label key={item.key} className="m-3">
<Checkbox
name={Object.keys(item.name)[0]}
index={index}
checked={this.state.checkedItems.get(Object.keys(item.name)[0])}
onChange={this.handleChange}
/>
{Object.keys(item.name)[0]}
</label>
))}
</div>
);
}
}

2nd update based on the requirements

import React from "react";
const Checkbox = ({
type = "checkbox",
name,
index,
checked = false,
onChange,
}) => (
<input
type={type}
name={name}
data-index={index}
checked={checked}
onChange={onChange}
/>
);
const checkboxes = [
{
id: "31",
category: "englsh",
projects: [
{
id: "9",
title: "This is the title for id 9",
description: "This is description for id 9",
},
],
},
{
id: "32",
category: "maths",
projects: [
{
id: "2",
title: "This is the title for id 2",
description: "This is description for id 2",
},
],
},
{
id: "33",
category: "marketing",
projects: [
{
id: "2",
title: "This is the title for id 2",
description: "This is description for id 2",
},
],
},
{
id: "34",
category: "physics",
projects: [
{
id: "2",
title: "This is the title for id 2",
description: "This is description for id 2",
},
],
},
{
id: "35",
category: "media",
projects: [
{
id: "2",
title: "This is the title for id 2",
description: "This is description for id 2",
},
{
id: "10",
title: "This is the title for id 10",
description: "This is description for id 10",
},
],
},
{
id: "36",
category: "science",
projects: [
{
id: "9",
title: "This is the title for id 9",
description: "This is description for id 9",
},
{
id: "11",
title: "This is the title for id 11",
description: "This is description for id 11",
},
],
},
];
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedItems: new Map(),
checkedArrays: [],
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const item = e.target.name;
const isChecked = e.target.checked;
let value = Object.values(checkboxes[e.target.dataset.index].projects);
console.log(isChecked);
console.log(item);
var len = value.length;
if (isChecked) {
for (var i = 0; i < len; i++) {
this.state.checkedArrays.push(value[i]);
}
} else {
for (var i = 0; i < len; i++) {
let index = this.state.checkedArrays.findIndex(
(x) => x.id === value[i].id
);
if (index > -1) {
this.state.checkedArrays.splice(index, 1); // 2nd parameter means remove one item only
}
}
}
this.setState((prevState) => ({
checkedItems: prevState.checkedItems.set(item, isChecked),
}));
console.log("Duplicated array");
console.log(this.state.checkedArrays);
var uniqueArray = this.state.checkedArrays.filter(function (elem) {
return !this[elem.id] && (this[elem.id] = true);
}, Object.create(null));
console.log("Unique array");
console.log(uniqueArray);
}
render() {
return (
<div className="row float-center d-flex justify-content-center">
{checkboxes.map((item, index) => (
<label key={item.id} className="m-3">
<Checkbox
name={item.category}
index={index}
checked={this.state.checkedItems.get(item.category)}
onChange={this.handleChange}
/>
{item.category}
</label>
))}
</div>
);
}
}