从 ReactJS 中的道具 onClick 获取图像 src答案

【问题标题】：Get image src from props onClick in ReactJS从 ReactJS 中的道具 onClick 获取图像 src
【发布时间】：2021-01-22 02:36:05
【问题描述】：

我正在从 API 获取图像列表。然后我将此图像传递给带有道具的单个 img 元素。这有助于我生成用于缩略图的图像列表。

编辑

图像缩略图是预览，单击其中一个图像缩略图时，我想将完整大小的图像添加到页面中。

问题是我希望能够单击其中一个图像并提取其 src 值，以便最终将该图像安装在完整的显示容器中：

当我真的只想要被点击的特定图像时，我的努力只记录了 api 列表中的所有图像。

JSON 返回数据：

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

1: {image: {image: image: "https://image1.jpg"}}
2: {image: {image: image: "https://image2.jpg"}}
3: {image: {image: image: "https://image3.jpg"}}
4: {image: {image: image: "https://image4.jpg"}}
etc...

App.js：

// This import file is shown below
import Image from "./components/Images;"    

const App = () => {
    const [images, setImages] = useState([]);

    const getImages = async () => {
    const response = await fetch(
      `https://api_for_the_images${key}`
    );

    const data = await response.json();
        setImages(data.images);
    };

    return(
        <>
          {images.map((image) => (
              <Images image={image.image} />
          ))}
        </>
    );
};

export default App;

Images.js：

import { useState } from "react";    

const Images = (props) => {

    const [ fullSize, setFullSIze ] = useState()

    const getImage = () => {
     // This return all images in the api list
     console.log(props.image);
 
     // I only want the image clicked on
     setFullSize(props.image);
    
    }        

    return(
        <div className="container">
          <img
            className="api-image"
            src={props.image}
            onClick={getImage}
          ></img>
          <div className="full-size-image">
            // This should be a full size image of the 
            // image that was clicked from the api
            <img src{fullSize}></img>
        </div>
    );
};

export default Images;

编辑

React 生成这个 html：

<div class="container">
    <img class="api-image" src="https://image1.jpg/>
</div>
<div class="container">
    <img class="api-image" src="https://image2.jpg/>
</div>
<div class="container">
    <img class="api-image" src="https://image3.jpg/>
</div>
<div class="container">
    <img class="api-image" src="https://image4.jpg/>
</div>

当 react 生成所有元素时，我如何定位特定元素？

【问题讨论】：

我不太明白这个问题。您已经可以访问图像的 src 属性。您究竟在哪里尝试访问点击图像的src？在 App 组件中？
@Jayce444 我编辑了描述和代码以更好地反映我想要的。图像缩略图是预览，单击其中一个图像缩略图时，我想将完整大小的图像添加到页面中。
getImage()事件调用时能否获取图片的大小
@linchong 目前它只记录来自 api 的巨大 src 链接列表，我不确定当 react 生成完全相同的元素时如何定位元素
在映射图片之前，可以console.log每一项，看看值是不是你要传递的

标签： reactjs onclick react-props

【解决方案1】：

如果你想知道点击了哪一个，只需在函数调用时传递值

import { useState } from "react";    

const Images = (props) => {

    const [ fullSize, setFullSIze ] = useState()

    const getImage = (image) => {
     console.log(image);
    }        

    return(
        <div className="container">
          <img
            className="api-image"
            src={props.image}
            onClick={() => {getImage(props.image)}}
          ></img>
          <div className="full-size-image">
            <img src{fullSize}></img>
        </div>
    );
};

export default Images;

【讨论】：

【解决方案2】：

你可以使用map，如果你是mapping，你可以给他们一个特定的index，然后你可以给他们一个id。这样您就可以使用特定的id 单独生成它们。

【讨论】：