React Button 设置我所有的元素被选中

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;
    })
  );
};

React Button 设置我所有的元素被选中

React Button to set my all elements checked

javascript

checked

reactjs

react-hooks