通过图像选择反应画廊

Question

我正在尝试构建 Google Photos 的替代品，我希望能够显示图库、选择文件并显示它们。 我使用了 react-grid-gallery ，它可能可以同时执行这两种操作（图像选择和显示），但是，我可以选择所有图像并显示它们，但不能选择特定的图像。

我的代码：

"use client";

import "yet-another-react-lightbox/styles.css";

import { CustomImage, imagesData } from "./images";

import { Gallery } from "react-grid-gallery";
import Lightbox from "yet-another-react-lightbox";
import { useState } from "react";

export default function Page() {
    const [index, setIndex] = useState(-1);
    const [images, setImages] = useState(imagesData);
    const handleClick = (index: number, item: CustomImage) => setIndex(index);

    const hasSelected = images.some((image) => image.isSelected);
  
    const handleSelect = (index: number) => {
      const nextImages = images.map((image, i) =>
        i === index ? { ...image, isSelected: !image.isSelected } : image
      );
      setImages(nextImages);
    };
  
    const handleSelectAllClick = () => {
      const nextImages = images.map((image) => ({
        ...image,
        isSelected: !hasSelected,
      }));
      setImages(nextImages);
    };

    const slides = images.map(({ original, width, height }) => ({
        src: original,
        width,
        height,
    }));
  
    return (
      <div>
            <div className="p-t-1 p-b-1">
                <button onClick={handleSelectAllClick}>
                {hasSelected ? "Clear selection" : "Select all"}
                </button>
            </div>
            <Gallery
                images={images}
                onClick={handleClick}
                enableImageSelection={false}
                onSelect={handleSelect} 
            />
            <Lightbox
                slides={slides}
                open={index >= 0}
                index={index}
                close={() => setIndex(-1)}
            />
        </div>
    );
}

Answer 1

问题在于

onClick

属性位于

<Gallery
   images={images}
   onClick={handleClick}
   enableImageSelection={false}
   onSelect={handleSelect} 
/>

这个官方示例展示了如何处理选择单个图像。

您应该使用

onSelect

而不是

onClick

。