React按钮设置我的所有元素选中

Question

我有以下场景，我将files映射为媒体卡组件

const [files, setFiles] = useState([]);
const thumbs = files.map((file, i) => (
<MediaCard
onClick={() => handleCardClick(i)}
checked={file.checked}
/>
));

然后我有一个方法，使我的MediaCard组件检查，以防它不是。

const handleCardClick = (index) => {
const newFiles = files.map((file, i) => {
if (i === index) file.checked = !file.checked
return file
});
setFiles(newFiles);
}

现在我需要一个button与一个新的方法称为例如allSelection，使checked我所有的文件映射在MediaCard组件，我怎么能实现它?

Answer 1

这是您需要的函数:

const allSelection = () => {
setFiles((files) =>
files.map((file) => {
file.checked = true;
return file;
})
);
};