反应按钮设置我检查的所有元素

问题描述

我有以下场景，我正在使用媒体卡组件映射 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 组件中，我该如何实现？

解决方法

这是您需要的功能：

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