Как вызвать другую функцию из withHandlers? - PullRequest
Новая
       36

Как вызвать другую функцию из withHandlers?

1 голос
/ 15 мая 2019

Я пытаюсь реализовать карты Google в своем приложении, используя пакет react-google-maps. На карте я показываю несколько Marker и использовал MarkerCluster.

До сих пор у меня нет проблем и легко реализовано из док. Но теперь я хочу показать InfoWindow, если щелкнуть маркер.

Итак, я подумал о создании функции для получения события click и передачи markerId, чтобы я мог вызвать API и получить соответствующие данные для этого маркера, а затем поместить его в информационное окно в табличной форме.

Теперь проблема, с которой я сталкиваюсь:

1) Звонок onToggleOpen с onMarkerClick

2) как установить данные в объекте infowindow в onMarkerClick

Вся эта проблема, с которой я сталкиваюсь, заключается в том, что я использую HOC, т.е. recompose. Я привык к реализации класса, но пытался реализовать функциональную реализацию, пытаясь сделать ее полностью безгосударственной.

Ссылка: 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}/>;
  }
}

Ответы [ 2 ]

2 голосов
/ 15 мая 2019

Чтобы вызвать 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


      }
    }
  ),
0 голосов
/ 15 мая 2019

Вы, вероятно, должны использовать withStateHandlers для обработки состояния.Кроме того, вы можете написать withHandlers более одного раза, поэтому обработчики внутри следующего withHandlers будут иметь доступ к другим обработчикам. 

compose(
  // .....
  withStateHandlers(
    { isOpen: false },
    {
      toggleOpen: (state) => () => ({ isOpen: !state.isOpen }),
      // or
      setOpen: () => (value) => ({ isOpen: value }),
    }
  ),
  withHandlers(
    // .....
    {
      onMarkerClick: (props) => markerss => {
       // .....
       props.toggleOpen();
       // .....
      },
    },
    // .....
  ),
  // .....
)
...