本文介绍了使用REACT-MODAL(REACT Js)传递道具(Img Url)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要将图像URL传递给REACTIVE js中的MODEL。与类似，在单击"；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 (
      

        
Customer's Deposit Record
        


        
            {deps.map((item) => (
              
            ))}
          

          

            

              
Deposit id
              
user id
              
img attachment
            
          
          

                
{item.id}
                
{item.userId}
                

                  
                     this.setState({ addModalShow: true })}
                    >
                      image attachment
                    

                    
                  
                
              
        
      
    );
  }
}

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 (

            
                
                    
                    Deposit Record
                    
                
                
                
                
                
                    Close
                
            


        );

    }
}
export default AddDepositModal;

我的问题：我无法将图像URL传递给Modal组件，也没有更好的方法在此代码中解决它。

请帮助我，如果有任何包括，更改或完整的解决方案为完美理解的要求将真的很大。提前表示感谢！

推荐答案

您好，这是您的解决方案

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 (
    

      
Customer's Deposit Record
      


      
          {deps.map((item) => (
            
          ))}
        

        

          

            
Deposit id
            
user name
            
img attachment
          
        
        

              
{item.id.name}
              
{item.value}
              

                
                   setDepHandler(item.id.value)}
                  >
                    image attachment
                  
                
              
            
      
      {visibleModal && (
         setVisibleModal(false)}
          image={depImage}
        />
      )}
    
  );
};

export default DepositRecord;

AddDepositModal.js

---

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

 const AddDepositModal = ({ show, onHide, image }) => {
  return (
    
      
        
          Deposit Record
        
      
      
        
      
      
        
          Close
        
      
    
  );
};
export default AddDepositModal;

已添加异步呼叫。此API是公开的，因此需要一些时间才能得到结果 。

这篇关于使用REACT-MODAL(REACT Js)传递道具(Img Url)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]Passing Props (img url ) using React-Modal (react js)

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。