时间戳

首页 > 解决方案 > 从 React map 函数保存图像

javascript - 从 React map 函数保存图像

问题描述

我想在单击时将图像从一个 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(...)}'中

标签： javascripthtmlreactjsevent-handlingstate

解决方案

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

你可以这样使用：

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>

推荐阅读