Question

我有一个react / redux应用程序，我已经添加了一个传单映射。传单地图正在通过geoJSON填充。有没有办法通过用户点击地图功能调用redux动作？当用户点击弹出窗口时，我真的希望能够运行一个动作。我想存储用户点击的功能的ID号，以便我可以运行操作来获取数据并将其放入商店，然后打开另一个页面，其中包含该功能的详细信息。

这就是我在传单中的内容：

myLayer = L.geoJSON(features, {
    //only points here
    filter: function(feature, layer) {
      return (feature.geometry.type == "Point");
    },
     //make each point a circle
    pointToLayer: function (feature, latlng) {
      return L.circleMarker(latlng, geojsonMarkerOptions);
    },
    onEachFeature: function(feature, layer) {
        //popup contents
        var customPopup = `<div class='popuplink' >  <-----user clicks
          <p>${feature.properties.title}</p></div>`;

        //popup options
        var customOptions =
        {
          width: '72', //about 1 inch
          className: 'custom'
        };

        //create layer
        layer.bindPopup(customPopup, customOptions);

    }


});
myLayer.addTo(map);

我试图在弹出窗口中输入一个链接，当点击该链接转到我想要的页面时。（我在应用程序中使用react-router）。像这样：

        var customPopup = `<a href='/details/${feature.properties.id} >
          <p>${feature.properties.title}</p></a>`;

但是当我这样做时，整个redux商店INIT被调用，我失去了一切。有人可以向我解释为什么会这样吗？我明白传单和反应各自保持自己的状态。但有没有办法在它们之间形成一座桥梁，这样我就可以从地图上调用动作而不会丢失我的商店？

Answer 1

行。我现在找到了解决办法。它不优雅，但它有效。如果有人能告诉我一个更好的解决方案，我很乐意听到它。

我无法直接从传单地图本身调用页面，因为redux会重新初始化并且全部丢失。所以我必须从已经在DOM上的东西调用redux。

我在反应页面上创建了2个隐藏字段。一个是输入字段，它将保存我想要获取的数据的id。第二个是实际调用获取操作创建者的按钮。点击按钮后，该按钮会被点击。动作创建者在输入字段中找到id＃并用它调用动作。然后操作进行并获取数据，然后使用路由器从那里转到详细信息页面。

在地图上，我创建了一个类似的弹出窗口：

onEachFeature: function(feature, layer) {

  var popupId = 'info' + feature.properties.id;

   //create a div element
   var domElem = document.createElement('div');
   domElem.id = popupId;

   //what popup will say
   var newContent = document.createTextNode(feature.properties.title);      

   //add the text node to the newly created div. 
   domElem.appendChild(newContent);

 //create onclick event for popup
 domElem.onclick = function() {

   //this points to input field on react container
   var target = document.getElementById('featureId'); 

   //fill it with the id of the feature
   target.value = feature.properties.id;

   //now 'click' the button which calls redux
   var btn = document.getElementById('goToDetails').click();
   }


 //create layer
 layer.bindPopup(domElem);

从传单映射调用redux操作

1 个答案: