Google Maps InfoWindowのリアクションでの取り扱い

Question

Googleマップにマーカーがあり、各マーカーをクリックしてマーカーに関する情報を表示できます。その情報は、その中にいくつかのリンクを含む文字列html形式です。私は、リンクがクリックされたときに反応関数を呼びたいと思う。どうやってやるの？関数_onClick（p）がすぐにレンダリングされるようになりましたが、関数の呼び出しメソッドを変更しましたが、機能しません。

_onClick(p){ 
    alert('HELLO ' + p.id) 
}, 

_renderPoints(positions){ 
    const markers = [] 
    let center 
    positions.forEach((p) => { 
     if (p.latLng){ 
      const point = new google.maps.LatLng(p.latLng.lat,p.latLng.lng) 
      const marker_title = p.code 
      const marker_content = `<b>${p.customerName}</b><br/> 
            <a href="#" onClick=${this._onClick(p)}>Click</a><br/> 
            <a href="#" style="color:mediumblue" onClick="window.open('${p.customerPhoto}','Foto Rumah ','resizable,height=260,width=370');return false;">${p.customerAddress}</a><br/> 
            <div style="margin-top:5px"> 
             stand kini: <a href="#" onClick="window.open('${p.currentStandPhoto}','Foto Meter Bulan Ini ','resizable,height=300,width=300');return false;">${p.currentStand}</a><br/> 
             stand lalu: <a href="#" onClick="window.open('${p.previousStandPhoto}','Foto Meter Bulan Lalu ','resizable,height=300,width=300');return false;">${p.previousStand}</a> 
            </div>` 
      const marker = new google.maps.Marker({ 
        position: point, 
        map: this.state.map, 
        title: marker_title 
       }) 

      const infowindow = new google.maps.InfoWindow({ 
       content: marker_content 
      }); 

      marker.addListener('click',function() { 
       infowindow.open(this.map, marker); 
      }) 
      markers.push(marker) 
      center = point 
     } 
    }) 
    this.setState({ 
     markers 
    }) 
    if (center){ 
     this.state.map.setCenter(center) 
    } 
}, 

Answer 1

それはあなたのコード内のアンカータグのonClick関数は、文字列として扱われたため、代わりに、あなたは、コンポーネント上であなたを作るコードbeloowを試し、そしてconst marker_content = <InfoWindow data={p}/>

const InfoWindow = React.createClass({ 
 
\t _onClick(p){ 
 
\t \t console.log(p) 
 
\t }, 
 
\t render: function() { 
 
\t \t var p = this.props.data 
 
\t \t return (<div> 
 
\t \t <b>${p.customerName}</b><br/> 
 
     <a href="#" onClick=${() => {this._onClick()}}>Click</a><br/> 
 
     <a href="#" style="color:mediumblue" onClick="window.open('${p.customerPhoto}','Foto Rumah ','resizable,height=260,width=370');return false;">${p.customerAddress}</a><br/> 
 
     <div style="margin-top:5px"> 
 
      stand kini: <a href="#" onClick="window.open('${p.currentStandPhoto}','Foto Meter Bulan Ini ','resizable,height=300,width=300');return false;">${p.currentStand}</a><br/> 
 
      stand lalu: <a href="#" onClick="window.open('${p.previousStandPhoto}','Foto Meter Bulan Lalu ','resizable,height=300,width=300');return false;">${p.previousStand}</a> 
 
     </div> 
 
\t \t </div>) 
 
\t } 
 
})

に このコード const marker_content = ....を変更する必要があります それが仕事であれば教えてください。役に立ったら嬉しいです