时间戳

首页 > 解决方案 > 使用反应钩子将图像数组中的图像显示到模态

reactjs - 使用反应钩子将图像数组中的图像显示到模态

问题描述

我有一个组件，它使用 map 方法从 json 文件中显示本地存储的图像。我想要做的是当我点击任何我希望图像以模态显示的图像时。当我尝试将图像的 id 作为道具传递给模式时，并尝试 console.log 它显示所有可用的 id，但不显示单击图像的 id。

import React, { useState } from "react";
import PropTypes from "prop-types";

import { Card, Modal } from "react-bootstrap";

import { data } from "../assets/images/stuff";
import "../assets/css/aboutUs.css";

const StuffInfo = (props) => {
  return (
    <Modal {...props} aria-labelledby="contained-modal-title-vcenter" centered>
      <Modal.Body>
      
        <div className="col-sm-6 col-md-4 mb-3  stuff">
          <Card key={props.id}>
            <Card.Img src={data.src} />
            <p>{data.stuffName}</p>
            <span>{data.title}</span>
          </Card>
        </div>
      </Modal.Body>
    </Modal>
  );
};

function AboutUs() {
  const [showModal, setShowModal] = useState(false);
  const [imge, setImge] = useState("");

  const handleClick = (id) => {
    console.log("Id is", id);

    setShowModal(true);
    setImge(data[id].src);
    console.log("image is", imge);
  };

  return (
    <div className="about-us">
      <h3>Lorem Ipsum</h3>
      <div className="info">
        <p>
          Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo
        </p>
        <h4>Lorem Ipsum </h4>
        <p>
         Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo
        </p>
      </div>
      <div className="our-services">
        <h4>Lorem Ipsum</h4>
        <div className="row">
          <div className="col-lg-4 col-md-6 train">
            <h5>Lorem Ipsum </h5>
            <div className="info-text">
              <i
                className="fa fa-graduation-cap"
                style={{ color: "#ff689b" }}
              ></i>
              <p>
             Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo
              </p>
            </div>
          </div>
          <div className="col-lg-4 col-md-6 train">
            <h5>Lorem Ipsum </h5>
            <div className="info-text">
              <i
                className="fa fa-wrench"
                aria-hidden="true"
                style={{ color: "#e9bf06" }}
              ></i>
              <p>
              Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo
              </p>
            </div>
          </div>
          <div className="col-lg-4 col-md-6 train">
            <h5>Lorem Ipsum </h5>
            <div className="info-text">
              <i
                className="fa fa-universal-access"
                style={{ color: "#3fcdc7" }}
              ></i>
              <p>
               Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo
              </p>
            </div>
          </div>
        </div>
      </div>

      <h5>Lorem Ipsum</h5>
      <div className="row">
        {data &&
          data.map((stuff, id) => (
            <div
              className="col-sm-6 col-md-4 mb-3  stuff"
              key={id}
              onClick={() => handleClick(id)}
            >
              <Card key={data.id}>
                <img src={stuff.src} id={id} />
                <p>{stuff.stuffName}</p>
                <span>{stuff.title}</span>
              </Card>
              <StuffInfo
                show={showModal}
                onHide={() => setShowModal(false)}
                id={data.id}
              />
            </div>
          ))}
      </div>
    </div>
  );
}

export default AboutUs;

StuffInfo.propTypes = {
  id: PropTypes.string,
  onHide: PropTypes.func,
};

这是我根据建议尝试的代码。

 <div className="row">
        {data &&
          data.map((stuff, id) => (
            <div
              className="col-sm-6 col-md-4 mb-3  stuff"
              key={id}
              onClick={() => setImge(id)}
            >
              <Card key={data.id}>
                <img src={stuff.src} id={id} />
                <p>{stuff.stuffName}</p>
                <span>{stuff.title}</span>
              </Card>
            </div>
          ))}

        <StuffInfo
          show={imge > -1}
          onHide={() => setImge(-1)}
          id={imge}
          data={data}
        />
      </div>
    </div>

const StuffInfo = ({ data, id }) => {
  {
    console.log("DATA is", data[id].src, data[id].stuffName, data[id].title);
  }
  return (
    <Modal aria-labelledby="contained-modal-title-vcenter" centered>
      <Modal.Body>
        <div className="col-sm-6 col-md-4 mb-3  stuff">
          <Card key={id}>
            <Card.Img src={data[id].src} />
            <p>{data[id].stuffName}</p>
            <span>{data[id].title}</span>
          </Card>
        </div>
      </Modal.Body>
    </Modal>
  );
};

标签： reactjs

解决方案

您拥有StuffInfo每个数据项，并且它们都共享相同的showModal标志，因此当您将其翻转为 true 时，它​​们都会同时显示。而不是 showModal您可以将所选项目的 id 保持在状态中并根据当前 id 检查它show={data.id === selectedId}，或者最好还是移到StuffInfo循环之外，如果您只有一个 StuffInfo ，它看起来像

          <StuffInfo
            show={selectedId > -1}
            onHide={() => setSelectedId(-1)}
            id={selectedId}
          />

让你成为一个工作示例https://codesandbox.io/s/react-bootstrap-playground-forked-wkzp5

推荐阅读