带and的动态复选框

Question

我有一个数据，想创建复选框。

默认情况下，所有字段都应该被选中，当我取消选中一个字段时，我应该知道哪个字段是未选中的，并更新过滤器数据(删除未选中的字段)。

我使用的是普通的复选框，但是这里我不知道哪个复选框被选中了。

我也尝试了checkboxgroup，但在checkboxgroup中你应该定义这是代码例子。

https://codesandbox.io/s/check-all-antd-5-0-7-forked-8bm54o?file=/demo.tsx

Answer 1

最简单的方法是将checked属性添加到您的数据对象中，并使用它而不是Checkbox的属性，因此只需从React中导入useState()并执行以下操作:

import React, { useState } from "react";
import "./index.css";
import { Checkbox } from "antd";
const App: React.FC = () => {
const [data, setData] = useState<any[]>([
{
id: 0,
title: "User ID",
key: "userId",
checked: true
},
{
id: 1,
title: "Description",
key: "description",
checked: true
},
{
id: 2,
title: "Surname",
key: "surname",
checked: true
},
{
id: 3,
title: "Name",
key: "name",
checked: true
}
]);
const onChange = (item) =>
setData(data.map(e => e.id === item.id ? { ...e, checked: !item.checked } : e));
return (
<>
{data.map((item) => (
<Checkbox
key={item.id}
checked={item.checked}
onChange={() => onChange(item)}
>
{item.title}
</Checkbox>
))}
</>
);
};
export default App;

请注意，如果您需要排序或修改复选框的顺序，最好使用数据的id作为map()中的键，而不是map()的索引，请参阅此处

Answer 2

这是一个基本的例子，它可以给你更多的控制

const data = [
{
id: 0,
title: "User ID",
key: "userId",
checked: true
},
{
id: 1,
title: "Description",
key: "description",
checked: true
},
{
id: 2,
title: "Surname",
key: "surname",
checked: true
},
{
id: 3,
title: "Name",
key: "name",
checked: true
}
];
const App: React.FC = () => {
const [items, setItems] = useState(data);
const onChange = (item: any, e: CheckboxChangeEvent) => {
console.log(`checked = ${e.target.checked}`, item);
const checked = e.target.checked;
setItems((checks) => {
return checks?.map((e) => (e.id === item.id ? { ...e, checked } : e));
});
};
return (
<>
{items.map((item, i) => {
return (
<div key={i}>
<Checkbox
checked={item.checked}
onChange={(e) => onChange(item, e)}
>
{item.title}
</Checkbox>
</div>
);
})}
</>
);
};

希望有帮助