从另一个组件获取一个状态
从另一个组件获取一个状态
提问于 2022-07-01 10:04:27
我有一个具有状态的Map组件。
const [userPickPos, setUserPickPos] = useState() 此状态表示标记在地图上的位置。
此Map组件将在页面组件中返回。在这个页面上，我想从Map组件访问这个标记的位置(状态)。我怎么能这么做？
映射：
const Map = (userPos) => {
const [userPickPos, setUserPickPos] = useState()
const MapEvents = () => {
useMapEvents({
click(e) {
const lat = e.latlng.lat;
const lng = e.latlng.lng;
setUserPickPos({lat: lat,lng: lng})
console.log(userPickPos)
},
});
}
const bounds = new LatLngBounds([81.505, -0.09], [50.773941, -84.12544])
return (
<>
<Head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</Head>
<MapContainer
className='absolute h-screen w-[1500px] left-[520px] top-[56px] bg-no-repeat bg-cover bg-[#738aaf]'
center={[71.505, -40.09]} zoom={3} scrollWheelZoom={true} noWrap={true}>
<ImageOverlay
url="/allmaphres.png"
bounds={bounds}
opacity={1}
zIndex={10}
/>
{userPickPos &&
<Marker position={userPickPos}>
<Popup>
Your Pick.
</Popup>
</Marker>
}
<MapEvents />
</MapContainer>
</>
);
}全部(页)：
const All = () => {
. // I need to use the state here
.
.
return (
<Map />
)
}回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-01 10:16:13
编辑：
在父组件中创建并发送给子组件的状态
地图(儿童)：
const Map = ({userPickPos,setUserPickPos}) => {
const MapEvents = () => {
useMapEvents({
click(e) {
const lat = e.latlng.lat;
const lng = e.latlng.lng;
setUserPickPos({lat: lat,lng: lng});
console.log(userPickPos)
},
});
}全页(父)
import React from 'react';
const All = () => {
const [userPickPos, setUserPickPos] = useState()
return <Map userPickPos={userPickPos} setUserPickPos={setUserPickPos} />
}
export default All;在子组件中创建并在父组件中使用的状态
地图(儿童)：
const Map = ({handleCallBack}) => {
const [userPickPos, setUserPickPos] = useState()
const MapEvents = () => {
useMapEvents({
click(e) {
const lat = e.latlng.lat;
const lng = e.latlng.lng;
setUserPickPos({lat: lat,lng: lng})
props.handleCallBack(userPickPos)
console.log(userPickPos)
},
});
}
.
.
.全页(父)
const All = () => {
const handleCallBack = (pos)=>{
console.log(pos)
}
return (
<Map handleCallBack={handleCallBack}/>
)
}这样，您就可以在两个组件中使用状态。
Stack Overflow用户
发布于 2022-07-01 10:30:20
useCallBack函数，如果您想从子到父获取值，请参见下面的代码
const Map = ({handleCallback}) => {
const [userPickPos, setUserPickPos] = useState()
const MapEvents = () => {
useMapEvents({
click(e) {
const lat = e.latlng.lat;
const lng = e.latlng.lng;
setUserPickPos({lat: lat,lng: lng});
handleCallback(userPickPos)
console.log(userPickPos)
},
});
}全页
import React from 'react';
const All = () => {
const handleCallback = (data) => {
// here you will get the value
console.log(data)
// your login
};
return <Map handleCallback={handleCallback} />
}
export default All;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72827627
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号