问使用react传递道具(img url )-模态(react js)
EN

Stack Overflow用户

提问于 2022-01-12 22:33:01

回答 1查看 505关注 0票数 2

我需要传递图像url到模态在反应js。例如，在单击"imgae附件“中的项目时，它会显示所选项目的模式和图像。但是它不能通过传递img={item.document}来显示我的图像数据，下面是我的代码：

DepositRecord.js

import React, { Component } from "react";
import { Table } from "react-bootstrap";
import { Button, ButtonToolbar } from "react-bootstrap";
import { AddDepositModal } from "./AddDepositModal";

export class DepositRecord extends Component {
  constructor(props) {
    super(props);
    this.state = { deps: [], addModalShow: false };
  }

  componentDidMount() {
    this.refershList();
  }

  refershList() {
    this.setState({
      deps: [
        { id: 9, userId: "12", document: "img1_url" },
        { id: 8, userId: "16", document: "img2_url" },
        { id: 6, userId: "13", document: "img3_url" },
        { id: 4, userId: "1", document: "img4_url" },
        { id: 2, userId: "1", document: "img5_url" }
      ]
    });
  }

  render() {
    const { deps } = this.state;

    let addModalClose = () => this.setState({ addModalShow: false });

    return (
      <div>
        <h3>Customer's Deposit Record</h3>
        <br />

        <Table className="mt-4" striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Deposit id</th>
              <th>user id</th>
              <th>img attachment</th>
            </tr>
          </thead>
          <tbody>
            {deps.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.userId}</td>
                <td>
                  <ButtonToolbar>
                    <Button
                      variant="primary"
                      onClick={() => this.setState({ addModalShow: true })}
                    >
                      image attachment
                    </Button>

                    <AddDepositModel
                      show={this.state.addModalShow}
                      onHide={addModalClose}
                      img={item.document}
                    />
                  </ButtonToolbar>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    );
  }
}

export default DepositRecord;

AddDepositModal.js <-- Madal组件

import React, { Component } from 'react';
import { Modal, Button, Row, Col, Form } from 'react-bootstrap';

export class AddDepositModal extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

            <Modal
                
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                    Deposit Record
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                <img src={this.props.img} width={700} height={1100}/>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="danger" onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>


        );

    }
}
export default AddDepositModal;

我的问题是:我无法将图像URL传递给Modal组件，并且在这段代码中没有更好的解决方法。

请帮助我，如果任何包括，改变或完整的解决方案，以完美地理解需求将是非常伟大的。事先非常感谢！

image

react-props

javascript

reactjs

1元体验云点播

覆盖建站/短视频等热门场景，提供媒资管理、短视频 SDK、小程序插件和播放器云+端一体化能力，助您抓住视频风口

回答 1

Stack Overflow用户

发布于 2022-01-12 23:26:46

你好，这是你的解决方案

DepositRecord.js

import React, { useEffect, useState } from "react";
import { Button, ButtonToolbar, Table } from "react-bootstrap";
import AddDepositModal from "./AddDeposiModal";

const DepositRecord = () => {
  const [deps, setDeps] = useState([]);
  const [visibleModal, setVisibleModal] = useState(false);
  const [depImage, setDepImage] = useState(null);

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

  const loadDepsHandler = () => {
    const myRequest = new Request("https://randomuser.me/api/", {
      method: "GET",
      cache: "default",
    });
    debugger;
    fetch(myRequest)
      .then((res) => res.json())
      .then((data) => {
        const { results } = data;
        setDeps(results);
      })
      .catch((err) => console.log(err));
  };

  const setDepHandler = (id) => {
    const dep = deps.find((a) => a.id.value === id);
    debugger;
    setDepImage(dep.picture.large);
    setVisibleModal(true);
  };

  return (
    <div>
      <h3>Customer's Deposit Record</h3>
      <br />

      <Table className="mt-4" striped bordered hover size="sm">
        <thead>
          <tr>
            <th>Deposit id</th>
            <th>user name</th>
            <th>img attachment</th>
          </tr>
        </thead>
        <tbody>
          {deps.map((item) => (
            <tr key={item.id.name}>
              <td>{item.id.name}</td>
              <td>{item.value}</td>
              <td>
                <ButtonToolbar>
                  <Button
                    variant="primary"
                    onClick={() => setDepHandler(item.id.value)}
                  >
                    image attachment
                  </Button>
                </ButtonToolbar>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      {visibleModal && (
        <AddDepositModal
          show={visibleModal}
          onHide={() => setVisibleModal(false)}
          image={depImage}
        />
      )}
    </div>
  );
};

export default DepositRecord;

AddDepositModal.js

 import React from "react";
 import { Button, Modal } from "react-bootstrap";

 const AddDepositModal = ({ show, onHide, image }) => {
  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Deposit Record
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <img src={image} width={700} height={1100} alt={image} />
      </Modal.Body>
      <Modal.Footer>
        <Button variant="danger" onClick={onHide}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );
};
export default AddDepositModal;