从 React 地图功能保存图像

Question

我想在单击时将图像从一个 useState 函数传输到另一个函数

const [images, setImages] = useState([]);
  useEffect(() => {
    setImages(ImgArray);
  }, []);

这是我获取源图像的地方

export const ImgArray = [
    {
        id: 1,
        src: 'https://cdn.britannica.com/s:600x1000/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg'
        
    }
];

我的想法是，每当我单击图像时，数组中的确切图像将保存到我的 'setLightboxImage'

const [lightboxImage, setLightboxImage] = useState([]);

<div className="header">

{images.map((image)=>(<React.Fragment><img alt="" src={image.src} key={image.id} onClick={setLightboxImage(image.src)} /> <div></div></React.Fragment>))}

    </div>

但我想它不会那样工作...我能以某种方式以另一种方式处理这个问题吗？也许是在一个单独的函数中？

此外，作为旁注，所有内容都包含在箭头函数组件中 'const App = () => {return(...)}'

Answer 1

通过括号“()”调用函数，函数会在初始化时触发。

你可以这样使用：

const [lightboxImage, setLightboxImage] = useState([]);

<div className="header">

{images.map((image)=>
(<React.Fragment>
<img alt="" 
src={image.src} 
key={image.id} 
onClick={() => {setLightboxImage(image.src)}} /> 

<div></div>
</React.Fragment>))}
</div>

从 React 地图功能保存图像

save image from React map function

html

javascript

state

event-handling

reactjs