gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 116 forks source link

Не работает onClick на <Placemark> #49

Closed Ivan-Korolenko closed 6 years ago

Ivan-Korolenko commented 6 years ago

Создал с помощью библиотеки следующий компонент:

import React, { Component } from "react";
import { YMaps, Map as YandexMap, Placemark } from 'react-yandex-maps';

class Map extends Component {

render() {
const { mapPoints } = this.props
const mapCenter = [ mapPoints[0].lat, mapPoints[0].lng ]
const mapState = { center: mapCenter, zoom: 11 }

return (
      <YMaps>
        <YandexMap state={mapState} width={'100%'} height={'100%'}>
        {
          mapPoints.map( (item, key) => (
             <Placemark
                key={key}
                geometry={{
                  type: "Point",
                  coordinates: [ parseFloat(item.lat), parseFloat(item.lng) ],
                }}
                properties={{
                  // Проставляем цифры иконкам на карте
                  iconContent: key+1,
                  hintContent: 'Собственный значок метки',
                  balloonContent: 'Это красивая метка',
                }}
                options={{
                  iconShape: {
                    type: 'Point',
                    coordinates: [ parseFloat(item.lat), parseFloat(item.lng) ]
                  }
                }}
                onClick={function(){ console.log('Got clicked!') }}
              />
          ))
        } 
        </YandexMap>
      </YMaps>
    )
}
}

Карта отображается, точки отображаются, но клик по точкам ничего не дает. Если повесить onClick на <YandexMap/>, то клик на нее срабатывает, но мне нужен именно клик по <Placemark/>.

Ivan-Korolenko commented 6 years ago

И балуны тоже не отображаются при клике по <Placemark/> на карте.

GeKiStolyarov commented 6 years ago

Используйте стрелочную функцию onClick={() => {console.log('It's work for me')}}

Ivan-Korolenko commented 6 years ago

@Fantomhaiv Попробовал. К сожалению, не сработало. Да и дело явно не в функции, потому что та же самая функция работает, если повесить её на <YandexMap/>. Да и замена обычной функции на стрелочную могла бы помочь только если бы я использовал внутри нее this или еще что-то, что корректнее работает именно в стрелочных функциях.

GeKiStolyarov commented 6 years ago

В моем проекте onClick корректно работает, вот пример https://codesandbox.io/embed/qkno815m0j

Ivan-Korolenko commented 6 years ago

@Fantomhaiv Спасибо! Понял, что проблема в моем проекте. Уже нашел её и исправил. Оказалось, что с данной библиотекой она не связана. Извиняюсь за ложную тревогу.