[英]How to render Modal from inside React Table using react-data-table-component
I'm trying to render a Modal, From React table.我正在尝试从 React 表渲染模态。 using a react-data-table-component使用反应数据表组件
That's how I'm trying.这就是我正在尝试的方式。
// Related part from table
const tableColumns = [
{
// name: 'More',
sortable: false,
width: '80px',
selector: (row) => {
return (
<div style={{ paddingTop: '80px' }}>
{' '}
// Problematic part
<Button color="primary" onClick={() => <MapModal containerNumber={row.container_number} show={true} />}>
Show
</Button>
<p className="pb-1">
<MapPin />
</p>
<p className="pb-1">
<Link to={`/shipment/${row.id}/`}>
<Eye />
</Link>
</p>
</div>
)
}
},
]
Modal Component that I want to render.我要渲染的模态组件。 on onClick event. onClick 事件。
import React, { Fragment } from 'react'
import { Modal, ModalHeader, ModalBody } from 'reactstrap'
const MapModal = ({ containerNumber, show }) => {
return (
<Fragment>
<Modal isOpen={show} className="modal-dialog-centered modal-xl">
<ModalHeader className="bg-transparent" toggle={() => setShow(!show)}></ModalHeader>
<ModalBody>
<iframe
src={`https:/fakepath/where-is-my-container/${containerNumber}`}
id="id"
></iframe>
</ModalBody>
</Modal>
</Fragment>
)
}
export default MapModal
Using this method, I'm not able to trigger Modal Show, so how can I fix this ?使用这种方法,我无法触发模态显示,那么我该如何解决这个问题? and what could be the problem?可能是什么问题?
The MapModal
component could be at the same level of the react datatable component, the show
and container_number
vars could be saved into a stateHook. MapModal
组件可以与 react datatable 组件处于同一级别, show
和container_number
变量可以保存到 stateHook 中。
In this way modal will be also rendered correctly (even with animations because the <Modal>
will be not unmounted)这样,模态也将正确呈现(即使使用动画,因为<Modal>
不会被卸载)
const Wrapper = () => {
const [showModal, setShowModal] = useState(false);
const [containerNumber, setcontainerNumber] = useState();
// Related part from table
const tableColumns = [
{
// name: 'More',
sortable: false,
width: '80px',
selector: (row) => {
return (
<div style={{ paddingTop: '80px' }}>
<Button color="primary" onClick={() => {
setcontainerNumber(row.container_number);
setshow(true);
}}>
Show
</Button>
<p className="pb-1">
<MapPin />
</p>
<p className="pb-1">
<Link to={`/shipment/${row.id}/`}>
<Eye />
</Link>
</p>
</div>
)
}
},
]
return <React.fragment>
<MapModal containerNumber={containerNumber} show={showModal} />
/* The table component */
<Datatable columns={tableColumns} />
</React.fragment>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.