當用戶單擊任何影像時，只會彈出具有新寬度和高度屬性的影像

我正在從 mongoDB 資料庫集合中檢索多條記錄的資料。現在我希望當用戶單擊任何檢索到的影像時，只有該影像彈出帶有新的寬度和高度屬性，這怎么可能。正在檢索的資料的螢屏截圖和瀏覽器顯示如下圖

獲取資料的代碼如下

import React, { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import axios from "axios";

const Allads = () => {
  const [data, setData] = useState("");
  const [imagePath, setPath] = useState("");

  const getData = () => {
    axios
      .get("/ads")
      .then((response) => {
        // const data = response.data

        setData(response.data.data);
        // console.log(response.data);
        console.log(data);
        // const imgg = data.images[0]
        //  console.log(imgg)
        //setPath('http://localhost:3000/uploads/profilepics/' data.images[0])
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  if (data.length > 0) {
    return data.map((datas, index) => {
      console.log(datas);
      return (
        <div className="datas" key={datas._id}>
          <div style={{ marginTop: "20px" }} class="container-fluid">
            <div class="row">
              <div class="col-lg-1 col-md-1 col-sm-1 "></div>

              <div class="col-lg-4 col-md-4 col-sm-4 ">
                <div
                  style={{ backgroundColor: "#1c2237", height: "180px" }}
                  class="row"
                >
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <h3 style={{ color: "#f00946" }}>
                      {datas.make} {datas.model}
                    </h3>
                    <p>
                      <b>{datas.location.formattedAddress}</b>
                    </p>
                    <p>
                      {datas.year} | {datas.mileage} Km | interior:{" "}
                      {datas.intcolor} | exterior: {datas.extcolor} |{" "}
                      {datas.engine} cc | {datas.transmission} |
                    </p>
                    <p>Updated: {datas.createdAt} </p>
                  </div>
                </div>

                <div
                  style={{ backgroundColor: "#f00946", height: "180px" }}
                  class="row"
                >
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <h5 style={{ color: "#1c2237" }}> PKR: {datas.price} </h5>
                    <p style={{ marginTop: "70px" }}>
                      <b>mob #:</b>
                      {datas.mobilenumber}
                    </p>
                    <p style={{ marginTop: "8px" }}>
                      <b>tel #:</b>
                      {datas.secondmobilenumber}
                    </p>
                  </div>
                </div>
              </div>

              <div class="col-lg-6 col-md-6 col-sm-6 ">
                <div style={{ backgroundColor: "white" }} class="row">
                  <div class="col-lg-4 col-md-4 col-sm-4  ">
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[0]}`}
                      alt="abc"
                    />
                  </div>
                  <div
                    style={{ paddingRight: "100px" }}
                    class="col-lg-4 col-md-4 col-sm-4 "
                  >
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[1]}`}
                      alt="abc"
                    />
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[2]}`}
                      alt="abc"
                    />
                  </div>
                </div>

                <div style={{ backgroundColor: "white" }} class="row">
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    {" "}
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[0]}`}
                      alt="abc"
                    />
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    {" "}
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[1]}`}
                      alt="abc"
                    />
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    {" "}
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[2]}`}
                      alt="abc"
                    />
                  </div>
                </div>
              </div>

              <div class="col-lg-1 col-md-1 col-sm-1 "></div>
            </div>
          </div>
        </div>
      );
    });
  } else {
    return <h3>no more ads</h3>;
  }
};
export default Allads;

uj5u.com熱心網友回復：

這是預覽任何單擊影像的代碼。我添加了注釋來解釋我在每個步驟中所做的事情。

https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/image.js

您可以在https://ikqdn.csb.app/image中看到運行的代碼codesandbox browser

腳步

• 有一個selectedImage狀態來存盤當前選擇的影像
• 僅在選擇任何影像時才顯示預覽，即如果未選擇任何影像，則不顯示任何預覽。

Note: I have done minimalistic Styling for a proper understanding you can do the rest as per your requirements.

標籤：反应 MongoDB

上一篇：有沒有辦法通過Mongoose中的查詢來更新檔案陣列中的物件？

下一篇：MongoDB聚合以從嵌套陣列中提取值并回傳總數