Question

使用React Leaflet，我试图从同级组件中触发Marker组件的“ click”事件。在常规的传单中，使用以下方法完成此操作：

L.marker(lng,lat).fire('click');
L.marker(lng,lat).openPopup();

在“结果”组件中，我有一个结果列表，当单击这些结果时，我想在地图上触发标记组件的事件。

render() { 
<Results tileClicked2={this.tileClicked3.bind(this)} items={this.state.items}></Results>
<Map ref={m => { this.leafletMap = m; }}>
          <TileLayer .../>
             {this.state.items.map((value, index) => {
                return (<Marker>...</Marker>)
             }

在我的“ tileClicked3”功能中，我可以登录 this.leafletMap

tileClicked3(index){    
    console.log(index);
    console.log(this.leafletMap)
    //I want to do:
    // marker.fire();
    // marker.openPopup(); 
  }

这是单击时的控制台日志：

我认为我必须亲近，但也许不是。

任何建议将不胜感激...

Answer 1

这可以通过以下方式完成：将被单击的项目索引保持在状态，并在该索引处获取标记项并呈现它。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer, Marker } from "react-leaflet";
import "./styles.css";

const listData = [
  {
    id: 1,
    text: "Location A",
    lng: 24.960937499999996,
    lat: 38.54816542304656
  },
  {
    id: 2,
    text: "Location B",
    lng: -103.71093749999999,
    lat: 40.97989806962013
  },
  {
    id: 3,
    text: "Location C",
    lng: 76.9921875,
    lat: 24.84656534821976
  }
];

const List = ({ onListItemClick }) => (
  <div>
    <ul>
      {listData.map((aLocation, index) => (
        <li
          key={aLocation.id}
          onClick={e => {
            onListItemClick(index);
          }}
        >
          {aLocation.text}
        </li>
      ))}
    </ul>
  </div>
);

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 1,
    markerIndex: 0
  };

  handleItemClick = index => {
    console.log("show Marker for", listData[index]);
    this.setState({
      markerIndex: index
    });
  };

  render() {
    const markerItem = listData[this.state.markerIndex];
    const MarkerToShow = <Marker position={[markerItem.lat, markerItem.lng]} />;
    return (
      <div>
        <List onListItemClick={this.handleItemClick} />
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {MarkerToShow}
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您可以在这里找到工作代码：https://codesandbox.io/s/mm6nmw9z29

如何以编程方式从另一个组件触发Marker组件事件

1 个答案: