[英]save image from React map function
我想在单击时将图像从一个 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>
但我想它不能那样工作......我能不能以另一种方式处理这个问题,也许是在一个单独的函数中?
另外作为旁注,所有内容都包含在 Arrow 函数组件“ const App = () => {return(...)}
”中
通过调用带括号“()”的函数,函数将在初始化时触发。
你可以这样使用:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.