Fatal编程技术网
  • javascript/
  • Javascript ReactJS组件将数据传回父组件不工作

Javascript ReactJS组件将数据传回父组件不工作

javascript google-maps-api-3 reactjs

Javascript ReactJS组件将数据传回父组件不工作,javascript,google-maps-api-3,reactjs,Javascript,Google Maps Api 3,Reactjs,我正在开发一个ReactJS组件，该组件通过GoogleMapsJavaScriptAPI呈现GoogleMap。在地图上，我动态地放置显示不同分销商位置的标记。现在，模拟数据来自一系列具有不同信息的分发服务器，并通过循环进行迭代。当点击一个标记时，我有一个显示分销商详细信息的信息窗口。现在，在这个信息窗口中，我有一个按钮，允许客户选择此分销商 GoogleMap组件归ChoosedDistributor组件所有。单击按钮时，我希望通过回调函数将ID（现在是一个带有分发服务器名称的字符串）发送回

我正在开发一个ReactJS组件，该组件通过GoogleMapsJavaScriptAPI呈现GoogleMap。在地图上，我动态地放置显示不同分销商位置的标记。现在，模拟数据来自一系列具有不同信息的分发服务器，并通过循环进行迭代。当点击一个标记时，我有一个显示分销商详细信息的信息窗口。现在，在这个信息窗口中，我有一个按钮，允许客户选择此分销商

GoogleMap组件归ChoosedDistributor组件所有。单击按钮时，我希望通过回调函数将ID（现在是一个带有分发服务器名称的字符串）发送回ChoosedDistributor组件

问题是我得到了一个
未捕获类型错误：当我单击按钮时，无法读取未定义的属性'callbackParent'。这可能是一个范围问题，因为当我在循环（？）中时，
此
不是指GoogleMap组件本身

然后，我尝试在循环外部创建一个变量
callbackParent
，该变量包含
this.props.callbackParent
，该变量应链接回ChoosedDistributor组件中的接收函数。然后我在按钮onclick上调用这个变量。这也不起作用，因为我得到了一个
未捕获的引用错误：callbackParent未定义

如果有人能解决这个问题，我将不胜感激。我是遗漏了什么，还是一个明显的语法错误？提前谢谢

下面是我的代码

选择Distributor组件


var ChooseDistributor = React.createClass({
    getSelectedDistributor: function(company){
        alert(company);
    },

    render: function(){
        return(
            <div>
                <Header headerClass="title" title="Choose distributor"/>
                <div className="fillViewPort">
                    <GoogleMap enableIwSelectButton={true} callbackParent={this.getSelectedDistributor}/>
                </div>
                <NavBar />
            </div>

        );
    }
})
module.exports = ChooseDistributor;



var chooseddistributor=React.createClass({
getSelectedDistributor:功能（公司）{
警报（公司）；
},
render:function（）{
返回(
);
}
})
module.exports=选择Distributor；


谷歌地图组件：


var GoogleMap = React.createClass({
    getInitialState: function(){
        return {
            // LOCATIONS STATE SHOULD GET DATA FROM STORE
            locations: [
                // ARRAY VALUES: [0]=LAT, [1]=LNG, [2]=COMPANY, [3]=ADDRESS, [4]=CITY, [5]=WEBSITE, [6]=PHONE, [7]=EMAIL
                [55.628353, 12.388910, 'Distributor One', 'First street 11', '1111 Copenhagen', 'www.company.com', '+4512345678', 'distributor@company.dk'],
                [55.623321, 12.388438, 'Distributor Two', 'Second street 22', '2222 Copenhagen', 'www.company.com', '+4512345678', 'distributor@company.dk'],
                [55.670710, 12.389256, 'Distributor Three', 'Third street 33', '3333 Copenhagen', 'www.company.com', '+4512345678', 'distributor@company.dk'],
                [55.581179, 12.295583, 'Distributor Four', 'Fourth street 44', '4444 Copenhagen', 'www.company.com', '+4512345678', 'distributor@company.dk'],
                [55.647296, 12.284211, 'Distributor Five', 'Fifth street 55', '5555 Copenhagen', 'www.company.com', '+4512345678', 'distributor@company.dk']
            ]
        }
    },
    componentDidMount: function(){
        var locations = this.state.locations;
        var enableIwSelectButton = this.props.enableIwSelectButton;
        var callbackParent = this.props.callbackParent;
        var map = new google.maps.Map(document.getElementById('googleMap'), {
            zoom: 11,
            center: new google.maps.LatLng(locations[0][0], locations[0][1]), // CENTER PROPERTY SHOULD GET COORDINATES OF THE DEVICE CURRENT LOCATION IF PERMITTED.
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADMAP]
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        });
        var infoWindow = new google.maps.InfoWindow();

        var marker, i;

        // PLACE MARKER ON MAP FOR EACH DISTRIBUTOR POSITION IN ARRAY.
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                map: map
            });
            // ADD INFOWINDOW WITH DISTRIBUTOR DETAILS TO EACH MARKER.
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {

                    infoWindow.setContent('<p class="iwTitle">' + locations[i][2] + '</p>'+
                        '<p class="iwText">' + locations[i][3] + '<br>' +
                        locations[i][4] + '<br>' +
                        '<a href="http://' + locations[i][5] + '">' + locations[i][5] + '</a></p>' +
                        '<p class="iwText"><i class="fa fa-phone iwIcons"></i>' + locations[i][6] + '<br>' +
                        '<i class="fa fa-envelope iwIcons"></i><a href="mailto:"' + locations[i][7] + '>'  + locations[i][7] + '</a></p>' +
                        (enableIwSelectButton ? '<button type="button" class="iwButton" onclick={this.props.callbackParent(locations[i][3])}><p>Select Distributor</p></button>' : ''));
                    infoWindow.open(map, marker);
                }
            })(marker, i));
        }
    },
    render: function(){
        return(
          <div id="googleMap" className="size-100-pct" />
        );
    }
})

module.exports = GoogleMap;



var GoogleMap=React.createClass({
getInitialState:函数（）{
返回{
//位置状态应从存储中获取数据
地点：[
//数组值：[0]=LAT、[1]=LNG、[2]=COMPANY、[3]=ADDRESS、[4]=CITY、[5]=WEBSITE、[6]=PHONE、[7]=EMAIL
[55.628353，12.388910，'Distributor One'，'First street 11'，'1111 Copenhagen'，'www.company.com'，'+4512345678'，'distributor@company.dk'],
[55.623321，12.388438，'分销商二'，'Second street 22'，'2222 Copenhagen'，'www.company.com'，'+4512345678'，'distributor@company.dk'],
[55.670710，12.389256，'Distributor Three'，'Third street 33'，'3333 Copenhagen'，'www.company.com'，'+4512345678'，'distributor@company.dk'],
[55.581179，12.295583，'Distributor Four'，'Fourth street 44'，'4444 Copenhagen'，'www.company.com'，'+4512345678'，'distributor@company.dk'],
[55.647296，12.284211，'Distributor Five street 55'，'5555 Copenhagen'，'www.company.com'，'+4512345678'，'distributor@company.dk']
]
}
},
componentDidMount:function（）{
变量位置=this.state.locations；
var enableIwSelectButton=this.props.enableIwSelectButton；
var callbackParent=this.props.callbackParent；
var map=new google.maps.map（document.getElementById（'googleMap'）{
缩放：11，
center:new google.maps.LatLng（locations[0][0]，locations[0][1]），//如果允许，center属性应获取设备当前位置的坐标。
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP]
},
mapTypeId:google.maps.mapTypeId.ROADMAP，
disableDefaultUI:true
});
var infoWindow=new google.maps.infoWindow（）；
var标记，i；
//在地图上为阵列中的每个分配器位置放置标记。
对于（i=0；i'+位置[i][2]+'
'+
“
”+位置[i][3]+”
'+
位置[i][4]+'
'+
“
”+
“
”+位置[i][6]+”
'+
“
”+
（启用IWSelectButton？“选择分发服务器：”）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}
},
render:function（）{
返回(
);
}
})
module.exports=谷歌地图；


更新：
多亏了@Radio-我的问题解决了。解决方案是为每个按钮提供一个Id，然后根据该Id获取按钮，并向其添加一个eventlistener，如下所示：


google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {

                    infoWindow.setContent('<p class="iwTitle">' + locations[i][2] + '</p>'+
                        '<p class="iwText">' + locations[i][3] + '<br>' +
                        locations[i][4] + '<br>' +
                        '<a href="http://' + locations[i][5] + '">' + locations[i][5] + '</a></p>' +
                        '<p class="iwText"><i class="fa fa-phone iwIcons"></i>' + locations[i][6] + '<br>' +
                        '<i class="fa fa-envelope iwIcons"></i><a href="mailto:"' + locations[i][7] + '>'  + locations[i][7] + '</a></p>' +
                        (enableIwSelectButton ? '<button type="button" id="btnSelect' + i + '" class="iwButton"><p>Select Distributor</p></button>' : ''));
                    infoWindow.open(map, marker);
                    var el = document.getElementById("btnSelect" + i);
                    el.addEventListener("click", function(){callbackParent(locations[i][2])});
                }
            })(marker, i));



google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
infoWindow.setContent（'
'+位置[i][2]+'
'+
“
”+位置[i][3]+”
'+
位置[i][4]+'
'+
“
”+
“
”+位置[i][6]+”
'+
“
”+
（启用IWSelectButton？“选择分发服务器：”）；
信息窗口。打开（地图、标记）；
var el=document.getElementById（“BTSELECT”+i）；
艾尔·阿德文

 myFn:()=>{
this.props.any();
}



var self = this.
myFn:function(){
  self.props.any();
}



infoWindow.setContent(... '<button type="button" class="iwButton"><p>Select Distributor</p></button>' : ''));
infoWindow.open(map, marker);

var el = document.getElementsByClassName("iwButton");
el.addEventListener("click", function() { callbackParent(locations[i][3]) });