Листовка всплывающего окна не открывается (React)

Question

Я работаю над видом карты для приложения-приложения, которое я использую в качестве листка для (react-leaflet). Я могу отображать маркеры на карте, но всплывающие окна, которые я связал с ними, не будут открываться при нажатии. Сначала я попытался использовать <Marker> и <Popup>, но this Вопрос Github предполагал, что лучше всего просто захватить объект карты листовки из компонента карты и явно привязать к нему маркеры. Это то, что у меня есть:

componentDidUpdate() { 
    this.map = this.refs.map.leafletElement; 
    this.state.rows.map((row) => { 
     var marker = L.marker([row.coordinate.latitude, row.coordinate.longitude]); 
     marker.addTo(this.map); 

     var popupText = util.format('<b>%s</b>', row.venue) 
     for(var i = 0; i < row.beers.length; i++){ 
      var beer = row.beers[i]; 
      popupText += util.format('<br>%s: %s - %d', beer.brewery, beer.name, beer.rating) 
     } 

     marker.bindPopup(popupText); 
     //marker.on('click', function(e){console.log('clicked!')}) 
    }); 
} 

render(){ 
    const cover = {position: 'absolute', left: 0, right: 0, top: 50, bottom: 0}; 
    return(
     <div> 
      <Map scrollWheelZoom={false} center={this.state.position} zoom={14} style={cover} ref="map"> 
       <TileLayer 
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       /> 
      </Map> 
     </div> 
    ); 
} 

Даже если я раскомментировать marker.on('click'...) линии, console.log кажется, никогда не срабатывает. У кого-нибудь есть идеи относительно того, что может происходить?

Answer 1

Этот issue устарел с October 7, 2015. Исправлено добавление детей с прослушивающими действиями. Ниже приведен пример того, как вы можете добавлять действия масштабирования во всплывающем окне.

<Marker position={position}> 
    <Popup> 
     <span> 
     <button onClick={this.zoomOut}> 
      Zoom out 
     </button > 
     <button onClick = {this.zoomIn}> 
      Zoom in 
     </button> 
     </span> 
    </Popup > 
    </Marker> 

Настоящий jsfiddle является рабочим примером.