gpt4 book ai didi

reactjs - 如何从 withHandlers 调用另一个函数?

转载 作者:行者123 更新时间:2023-12-04 13:19:09 26 4
gpt4 key购买 nike

我正在尝试使用 react-google-maps 包在我的应用程序中实现谷歌地图。在 map 中,我显示了多个 Marker 并使用了 MarkerCluster

到目前为止,我没有任何问题,并且很容易从文档中实现。但是现在我想在点击标记时显示 InfoWindow

所以,我想制作一个函数来获取点击事件并传递 markerId ,这样我就可以调用 API 并获取该标记的相关数据,然后以表格方式将其放入 infowindow 中。

现在,我面临的问题是:

1)从onToggleOpen调用onMarkerClick
2)如何在onMarkerClick中的infowindow对象中设置数据

我面临的所有这些问题都是因为我正在使用 HOC,即 recompose
我习惯于 Class 实现,但尝试了函数式实现,试图使其完全无状态。

引用链接:https://tomchentw.github.io/react-google-maps/#infowindow

以下是我的代码:

import React, { Component } from "react";
import Header from "./Header.js";
import Sidebar from "./Sidebar.js";
import axios from "axios";
import imgmapcluster from "./pins/iconmapcluster.png";
import user from "./pins/user1copy.png";
import { compose, withProps, withHandlers } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
InfoWindow
} from "react-google-maps";
// const fetch = require("isomorphic-fetch");
const {
MarkerClusterer
} = require("react-google-maps/lib/components/addons/MarkerClusterer");

const MapWithAMarkerClusterer = compose(
withProps({
googleMapURL:
"https://maps.googleapis.com/maps/api/js?key=AIzaSyCHi5ryWgN1FcZI-Hmqw3AdxJQmpopYJGk&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `90vh` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
withHandlers(
{
onMarkerClustererClick: () => markerClusterer => {
// console.log("markerCluster", markerClusterer);
const clickedMarkers = markerClusterer.getMarkers();
// console.log(`Current clicked markers length: ${clickedMarkers.length}`);
// console.log(clickedMarkers);
},
onMarkerClick: (props) => markerss => {


//calling api and setting info window object
props.isOpen=!props.isOpen //showing error

},
onToggleOpen: ({ isOpen }) => () => ({
isOpen: !isOpen
})
}
),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap
defaultZoom={5}
defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }}
>
<MarkerClusterer
onClick={props.onMarkerClustererClick}
averageCenter
styles={[
{
textColor: 'white',
url: imgmapcluster,
height: 68,
lineHeight: 3,
width: 70
}

]}
enableRetinaIcons
gridSize={50}
>
{props.markers.map((marker, index) => (
<Marker
key={index}
icon={user}
onClick={props.onMarkerClick.bind(props,marker)}
position={{ lat: marker.latitude, lng: marker.longitude }}
/>
))}
{props.isOpen && (
<InfoWindow
// position={{ lat: props.infowindow.lat, lng: props.infowindow.lng }}
onCloseClick={props.onToggleOpen}
>
<h4>hello</h4>
</InfoWindow>
)}
</MarkerClusterer>
</GoogleMap>
));

class DemoApp extends React.PureComponent {
componentWillMount() {
this.setState({ markers: [],isOpen:false,infowindow:{} });
}

componentDidMount() {

axios({
url: "http://staging.clarolabs.in:6067/farmerinfo/farmercoordinates",
method: "POST",
data: {
temp: "temp"
},
headers: {
"Content-Type": "application/json"
}
}).then(res => {

this.setState({ markers: res.data.data.list });
});

}

render() {
return <MapWithAMarkerClusterer markers={this.state.markers} isOpen={this.state.isOpen} InfoWindowobject={this.state.InfoWindowobject}/>;
}
}

最佳答案

为了从另一个调用 withHandler ,您需要将它们分开在两个处理程序中。您也可以使用 withStateHandler并存储 infoWindow 状态

withStateHandlers(
{ infoWindow: null },
{
setInfoWindow: () => (value) => ({ infoWindow: value)
}
),
withHandlers({
onToggleOpen: ({ isOpen }) => () => ({
isOpen: !isOpen
})
}),
withHandlers(
{
onMarkerClustererClick: () => markerClusterer => {
// console.log("markerCluster", markerClusterer);
const clickedMarkers = markerClusterer.getMarkers();
// console.log(`Current clicked markers length: ${clickedMarkers.length}`);
// console.log(clickedMarkers);
},
onMarkerClick: (props) => markerss => {
const { setInfoWindow, onToggleOpen} = props;

//calling api and setting info window object
setInfoWindow({lat: res.lat, lng: res.lng}) // set infoWindow object here
onToggleOpen() // Toggle open state


}
}
),

关于reactjs - 如何从 withHandlers 调用另一个函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56145086/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com