[英]Setting state inside event listener which is inside componentDidMount method
我有一個需要將用戶的緯度和緯度導出為道具/狀態的應用程序。 我嘗試在事件處理程序中多次設置狀態,但我認為我的問題是我無法正確地將“ this”綁定到函數,因此無法訪問事件偵聽器中的狀態。 我嘗試在componentDidMount內部幾乎所有地方都使用“ bind(this)”,但是即使我使用它時也沒有出現錯誤,但這似乎也無法完成工作。 我設置了多個console.logs以查看發生了什么。
換句話說,我想在事件處理程序中使用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
您忘記bind
函數bind
到構造函數中:
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() {
...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.