如何解决如何通过模态传递变量?
我正在使用带有传单的 React.js,但我不知道如何在单击我的模态饮食时传递变量以获取。我的意思是这就是我所拥有的
当我点击打开模式时,我得到了:
我希望当我点击上面的打开模式时,我喝了酒,而另一个吃的是 lorem ipsum ...
这是地图的代码:
import React from "react";
import { Map,TileLayer,Marker,Popup } from "react-leaflet";
import { defaultMarker } from "./defaultMarker";
import "./Map.css";
const center = [51.505,-0.09];
const data = [
{ title: "eat",coord: [50,-0.09] },{ title: "drink",coord: [52,-0.5] }
];
const MapComp = ({ onOpen }) => {
return (
<Map style={{ height: "100vh" }} center={center} zoom={5}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{data.map((todo) => (
<Marker position={todo.coord} icon={defaultMarker}>
<Popup className="request-popup">
<button onClick={onOpen}>Open Modal</button>
</Popup>
</Marker>
))}
</Map>
);
};
export default MapComp;
还有模态的代码:
import React from "react";
// import { Button,Modal } from "react-bootstrap";
import { Button,Modal,ModalHeader,ModalBody,ModalFooter } from "reactstrap";
export default function CustomModal({ show,onClose }) {
return (
<div>
<Modal isOpen={show} toggle={onClose}>
<ModalHeader onClose={onClose}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident,sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={onClose}>
Do Something
</Button>{" "}
<Button color="secondary" onClick={onClose}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
你也可以在这里找到我的代码:
我该怎么做?
非常感谢!
解决方法
传递变量的示例代码。
在您的应用中
export default function App() {
const [show,setShow] = useState(false);
const [ variableToModel,setVariableToModel] = useState('')
const handleClose = () => setShow(false);
const handleOpen = (variable) => {
setShow(true);
setVariableToModel(variable)
}
return (
<>
<MapComp onOpen={handleOpen} />
<Modal show={show} onClose={handleClose} myProp={variabletoModel} />
</>
);
}
在你的地图中
<button onClick={() => onOpen('SHOW ME IN THE MODAL'}>Open Modal</button>
,
您可能需要添加一些状态管理,这样您就可以在组件之间添加“全局范围”共享信息,可能性:
- Redux:如果您有复杂的数据,请使用它。
- React Context:可能你需要走这条路,只要你需要一点状态管理。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。