componentDidMountメソッドの内部にあるイベントリスナー内に状態を設定する

Question

私は、ロープチットとユーザーの緯度を小道具/状態としてエクスポートする必要があるアプリケーションを持っています。私はイベントハンドラの中で状態を何度も設定しようとしましたが、私は自分の問題は私が正しく 'this'を関数にバインドすることができないと思うので、イベントリスナの中の状態にアクセスできません。私はcomponentDidMountの中で事実上どこでも "bind（this）"を使ってみましたが、エラーを出さずに使用したとしても、仕事を終わらせるようです。私は何が起こっているか見るために複数のconsole.logを設定しました。

他の言葉では、イベントハンドラ内にsetStateを設定したいと思います。

import React from 'react'; 



class GoogleMap extends React.Component{ 

constructor(){ 
super(); 
this.state = { 
    lat: '', 
    lon: '' 
} 
} 

componentDidMount(){ 
    var map, infoWindow; 


    map = new window.google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 15 
    }); 


    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 

     var marker = new window.google.maps.Marker({ 
     position: { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }, 
     map: map, 
     draggable:true, 
     title: 'Hello World!'}) 

    // infoWindow.setPosition(pos); 
    // infoWindow.setContent('Location found.'); 
    // infoWindow.open(map); 
     map.setCenter(pos); 

       //marker listeners 
     window.google.maps.event.addListener(marker, 'dragstart', function() { 
      console.log('marker dotkniety'); 
      document.getElementById('test').innerHTML = '<p>Currently dragging 
marker...</p>'; 
     }); 


     window.google.maps.event.addListener(marker, 'dragend', function(e) { 
     console.log('marker upuszczony'); 
     document.getElementById('test').innerHTML = '<p>Want to export: 
Current Lat: ' + e.latLng.lat().toFixed(3) + ' Current Lng: ' + 
e.latLng.lng().toFixed(3) + '</p>'; 
     console.log(this, 'this inside the event listener'); 

     // this.setState(() => { 
     // return {lat: e.latLng.lat(), 
     // lon: e.latLng.lng()} 
     // }) 

     }.bind(this) 
    ); 


    }, function() { 
     handleLocationError(true, map.getCenter()); 
    }); 



    } else { 
    // Browser doesn't support Geolocation 
    handleLocationError(false, map.getCenter()); 
    } 


function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
         'Error: The Geolocation service failed.' : 
         'Error: Your browser doesn\'t support 
geolocation.'); 
    infoWindow.open(map); 
} 

console.log('DID MOUNT'); 
console.log(this); 
console.log(this.state); 
} 


render(){ 

    return(

     <div> 
      <div id='map' /> 
      <div id='test' /> 
     </div> 
    ) 
} 
} 
export default GoogleMap 

Answer 1

あなたはbindにコンストラクタの内部機能を忘れて：ここでは、マップcompononentためのコードである私はそれ私が得をバインドしようとしたとき

constructor() { 
    super() 

    this.handleLocationError = this.handleLocationError.bind(this) 

    this.state = { ... } 
} 

componentDidMount() { 
    var map, infoWindow; 

    map = new window.google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 15 
    }) 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition((position) => { 
     var pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     } 

     var marker = new window.google.maps.Marker({ ... }) 

     map.setCenter(pos); 

     // marker listeners 
     window.google.maps.event.addListener(marker, 'dragstart',() => { 
     console.log('marker dotkniety'); 
     document.getElementById('test').innerHTML = '...'; 
     }) 

     window.google.maps.event.addListener(marker, 'dragend', (e) => { 
     console.log('marker upuszczony') 
     document.getElementById('test').innerHTML = '...' 
     console.log('this inside the event listener') 
     }) 
    },() => this.handleLocationError(true, map.getCenter(), ??, map)) 
    } else { 
    // Browser doesn't support Geolocation 
    this.handleLocationError(false, map.getCenter(), ??, map) 
    } 

    console.log('DID MOUNT'); 
    console.log(this); 
    console.log(this.state); 
} 

handleLocationError(browserHasGeolocation, infoWindow, pos, map) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
        'Error: The Geolocation service failed.' : 
        'Error: Your browser doesn\'t support geolocation.'); 
    infoWindow.open(map) 

}

render() { 
    ... 
}