时间戳

首页 > 解决方案 > 作为反应，将 onClick 从 Google Maps 中的标记传递到 app.js 时遇到问题

javascript - 作为反应，将 onClick 从 Google Maps 中的标记传递到 app.js 时遇到问题

问题描述

我想记onClick下单击标记时的事件并将其传递给 App.js。地图正在加载并且代码运行，但是当我点击一个标记时我得到的只是onClick console.log在我的 Map.js 中返回一个空对象。

子组件：

function MyComponent( places, onMarkerClickMap ) {

  let allTheMarkers = 
    .
    .
    .
  })

  let markerClick = onMarkerClickMap;

  let foundMarkers = places.foundPlaces.map(place => {

    return (
        <Marker
            key={place.id}
            position={{ lat: place.lat, lng: place.lng }} 
            icon={place.alive ? icon1 : iconDead}
            onClick={() => {console.log(markerClick)}}
        />
    );
  })

  return (
    <LoadScript
      googleMapsApiKey={API}
    >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={11.3}
        options={{styles: mapStyles}}
      >
        
        {foundMarkers ? foundMarkers : allTheMarkers}

      </GoogleMap>

    </LoadScript>
  )
}

父组件：

handleMarkerClick = (e) => {
      const id = e.target;
      console.log(id);
  }

  render() {
    return (
      <div className="container">
        <div className="wrapper">
          <Map
            places={this.state.places}
            foundPlaces={this.state.foundPlaces}
            onMarkerClickMap={this.handleMarkerClick}
          />
        </div>
      </div>
    );
  }

标签： javascriptreactjsgoogle-mapsevent-handlingdom-events

解决方案

不确定控制台记录整个功能是否会给你任何有用的东西..

如果你这样做，它会在控制台记录 id 吗？onClick={() => {markerClick()}}

cos markerClick 本质上就是handleMarkerClick 函数

推荐阅读