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

Question

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

编辑

图像缩略图是预览图，单击其中一个图像缩略图后，我想将全尺寸图像添加到页面中。

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

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

JSONreturn数据：

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

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 生成相同的特定元素时，如何定位它们？

Answer 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;

Answer 2

你可以使用 map，当你是 mapping 他们时，你可以给他们一个特定的 index，然后你可以给他们一个 id。这样您就可以使用特定的 id.

单独生成它们

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

Get image src from props onClick in ReactJS

onclick

reactjs

react-props