[英]Passing Props (img url ) using React-Modal (react js)
我需要將圖像 url 傳遞給反應 js 中的模態。 就像,單擊“imgae 附件”中的項目時,它會顯示帶有所選項目圖像的模式。 但它不能通過傳遞 img={item.document} 來顯示我的圖像數據,下面是我的代碼:
存款記錄.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 傳遞給模態組件,並且沒有更好的想法在此代碼中解決它。
請幫助我,如果有任何包括、更改或完整的解決方案來完美理解需求,那將非常棒。 提前謝謝了!
您好,這是您的解決方案
存款記錄.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;
添加了異步調用。 此 API 是公開的,因此需要一些時間才能獲得結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.