javascript - 在另一个 React 组件函数中调用 React 组件函数？

Question

我正在从 getCurrentPosition 的回调函数调用 getReverseGeocodingData()。得到下面的错误函数未定义？

getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
                console.log(position.coords.latitude);
                console.log(position.coords.longitude);

             getReverseGeocodingData(position.coords.latitude,position.coords.longitude);
                alert('Ahmad');
            });
        } else {
             console.error("Geolocation is not supported by this browser.");
        }
    }
    getReverseGeocodingData(lat, lng){
        var latlng = new google.maps.LatLng(lat, lng);
        // This is making the Geocode request
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status !== google.maps.GeocoderStatus.OK) {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var address = (results[0].formatted_address);
            }
        });
    }

我在react中使用meteor，上面的代码位于react组件之一内我尝试使用带括号和不带括号的关键字来调用 if？

我尝试了以下选项，但没有帮助我收到 getReverseGeocodingData is not function!! this.getReverseGeocodingData(position.coords.latitude,position.coords.longitude).bind(this);

getReverseGeocodingData(position.coords.latitude,position.coords.longitude).bind(this);


this.getReverseGeocodingData(position.coords.latitude,position.coords.longitude).bind();

this.getReverseGeocodingData(position.coords.latitude,position.coords.longitude);

控制台错误截图

我更新了代码如下，但我仍然是下面的问题无法读取未定义的属性“getReverseGeocodingData”

export default class AddUser extends React.Component {
    constructor(props){
            this.getReverseGeocodingData = this.getReverseGeocodingData.bind(this);
        }
        getReverseGeocodingData(lat, lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            // This is making the Geocode request
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status !== google.maps.GeocoderStatus.OK) {
                    alert(status);
                }
                // This is checking to see if the Geoeode Status is OK before proceeding
                if (status == google.maps.GeocoderStatus.OK) {
                    console.log(results);
                    var address = (results[0].formatted_address);
                }
            });
        }

        getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((position) => {
                    console.log(position.coords.latitude);
                    console.log(position.coords.longitude);

                    this.getReverseGeocodingData(position.coords.latitude, position.coords.longitude);
                });
            } else {
                console.error("Geolocation is not supported by this browser.");
            }
        }

添加了上次更改的屏幕截图。

通过将绑定(bind)添加到 html 内的调用解决了该问题。

非常感谢。

Answer 1

您应该使用this.getReverseGeocodingData(...)。另外，如果您将 getLocation 传递给某些其他组件，则应该显式绑定(bind) this(否则您将丢失对当前组件的 this 引用)