gribnoysup / react-yandex-maps

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

Как сделать обработчик onclick внутри balloonContentBody ? #208

Closed MaGaKZ closed 4 years ago

MaGaKZ commented 4 years ago

Хочу выразить огромную благодарность за эту библиотеку. Я добавляю много меток на карту через кластеризацию, но когда я нажимаю на кнопку внутри balloon'а метод не срабатывает.

class MapBlock extends Component {

   addPlacemark = el => {
    let obj = new this.ymaps.Placemark(
        [el.lng, el.lat],
        {
          clusterCaption: `Объект: ${el.id}`,
          balloonContentBody: `<button onclick='${this.selectObject(el.id)}'>Выбрать объект</button>`
        },
        {
          iconColor: "#3caa3c",
          preset: "islands#circleIcon",
        }
      );
  }

  selectObject = id => {
    console.log("selected object", id);
  }
}

Не могу понять почему selectObject метод не срабатывает.

mmarkelov commented 4 years ago

@MaGaKZ вы же можете обернуть метки в объект кластера(дока). И тогда нет проблем:

<YMaps>
  <Map
    defaultState={{
      center: [55.751574, 37.573856],
      zoom: 5,
    }}
  >
    <Clusterer
      options={{
        preset: 'islands#invertedVioletClusterIcons',
        groupByCoordinates: false,
      }}
    >
      {points.map((coordinates, index) => (
        <Placemark key={index} geometry={coordinates} onClick={() => alert('Hello!!!')} />
      ))}
    </Clusterer>
  </Map>
</YMaps>

Правда это будет работать если Вам не нужно будет использовать balloonContentBody. С обработчиком внутри balloonContentBody советую посмотреть #130 чтобы понять как можно поступить.

В Вашем примере this.selectObject(el.id) не будет работать, так как this указывает не на класс, а на объект карт Placemark

MaGaKZ commented 4 years ago

Огромное спасибо ! Так мучался с этим несколько дней. Закрываю issue.