react-google-maps 在标记点击时传递道具

Question

我正在尝试在我的应用中集成“react-google-maps”以显示地图。我很难理解他们的标记系统。

https://tomchentw.github.io/react-google-maps/#marker

我能够显示我的地图并正确显示我的所有标记。下一步是我遇到问题的地方。我需要能够单击每个标记并知道单击了哪个标记。我已经评论了以下代码，以显示我现在要在控制台中显示的道具。我认为我只需要在事件中传递另一个参数，但我不知道该怎么做。老实说，现在我相信我正在传递事件侦听器，但我什至不完全确定当我记录那个“e”变量时我在看什么。

你可以在我的 github 中看到我目前拥有的东西。如果您单击标记，您将看到我正在记录的内容。

https://joweber123.github.io/take-me-there/login/James

请帮忙，我在其他任何地方都找不到讨论的信息。非常感谢你

    import React, { Component } from 'react';
    import { withGoogleMap, GoogleMap, Marker, } from "react-google-maps";
    import { compose, withProps } from "recompose";

    class List extends Component {

      //I eventually will use this information to set state and all of that, but for now I just don't understand how to pass information to this function from my marker on onClick

      handleMarkerClick(e){
        console.log(e);
      }
      render(){

        const { compose, lifecycle} = require("recompose");

        const {
          withGoogleMap,
          GoogleMap,
          Marker,
        } = require("react-google-maps");

        const MapWithAMarker = compose(
        withGoogleMap
      )(props =>

        <GoogleMap
          defaultZoom={8}
          defaultCenter={{ lat: Number(`${this.props.locations[Object.keys(this.props.locations)[Object.keys(this.props.locations).length-1]].location.lat}`), lng: Number(`${this.props.locations[Object.keys(this.props.locations)[Object.keys(this.props.locations).length-1]].location.lng}`) }}
          locations={this.props.locations}
        >
        {
          Object
          .keys(this.props.locations)
          .map(key =>
          <Marker
            key={key}
            position={{ lat: Number(`${this.props.locations[key].location.lat}`), lng: Number(`${this.props.locations[key].location.lng}`) }}
            locations={this.props.locations[key]}
            //I want to be able to pass the information that is stored in my locations prop here, but I have no idea how to do that.  
            onClick={props.onMarkerClick}
          />
        )
          }
        </GoogleMap>
      );

      return (
        <div className = "location-list one-third column center border-main full-height">
            <MapWithAMarker
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `400px` }} />}
              mapElement={<div style={{ height: `100%` }} />}
              locations={this.props.locations}
              //I am not even really sure what I am doing here.  What gets printed out in my console gives me some information but what I really want to be able to do is to pass the locations props of my specific marker and have access to that information
              onMarkerClick={(e)=>this.handleMarkerClick(e)}
            />
        </div>
      );
    }
    }


    export default List;

Answer 1

我想通了！我之前只是传递了事件侦听器，所以它当然不包含我需要的任何信息。我也不需要将它的父级传递给它，因为只需让它触发自己的事件就足够了。谢谢大家看这个。

onClick={()=> this.props.handleMarkerClick(this.props.locations[key])}

我想我没有问自己正确的问题，但是一旦我找到了这两个答案，我就更好地理解了我需要做什么。

React - Passing props to child onClick

Pass props to parent component in React.js

Answer 2

你能展示 this.props.locations 中包含的内容吗？通常你想映射位置，每个位置都应该有某种 id 字段。而不是通过键映射，您应该通过位置数组进行映射。这样，当调用 onClick 函数时，您可以传递 id（如果它们在位置对象本身中，甚至可以传递坐标，我认为它们会传递）。