Как привязать данные к щелчку маркера в React Leaflet? - PullRequest
Новая
       45

Как привязать данные к щелчку маркера в React Leaflet?

0 голосов
/ 01 ноября 2019

Я пытаюсь связать данные, чтобы при нажатии на маркер я мог получить значение, в частности идентификатор из поля с именем «station_id» в json, с которым я работаю. В данный момент я работаю с консольной системой регистрации событий event.target, когда создатель нажимается: 

    markerClick = (e) =>{
            console.log(e.target);
        }

 let markers =null;
        if(this.props.showStations) {
        markers = (

            this.props.stations.data.stations.map((station) =>
                <Marker 
                    position={[station.lat, station.lon]}
                    onClick={this.markerClick.bind(this, station)}>
                </Marker>
                )

        )
        }

Я верю, что способ сделать это - связать функцию markerClick, но я не уверен, как это сделать правильно. Ниже мой код:

App.js 

import React, { Component } from 'react';
import Leaf from './components/Leaf';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        height: "100vh",
        width: "100vw",
        latitude: 40.7128,
        longitude: -74.0060,
        zoom: 10
      },
      latitude: 40.7128,
      longitude: -74.0060,
      zoom: 10,
      stations: [],
      showStations: false,
      selectedStation: null,
      userLocation: {}
    };
  }

  componentDidMount() {
    const request = async()=> {
      await fetch('https://gbfs.citibikenyc.com/gbfs/en/station_information.json')
      .then(res => res.json())
      .then(res=>
        this.setState({stations: res, showStations: true}))
    }
    request();
  }

  checkData=()=>{
    console.log(this.state.stations)
    this.state.stations.data.stations.map(e=>{
      console.log(e)
    })
  }

  render() {

    return (
      <div>
          <button onClick={this.checkData}>click me</button>   
          <Leaf 
            viewport={this.state.viewport}
            stations={this.state.stations}
            showStations={this.state.showStations}/>
      </div>
    );
  }
}

export default App;

Leaf.js 

import React, {Component} from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
//import './leaf.css'
//import InfoBox from './InfoBox';
import { Button } from 'react-bootstrap';
//import Search from './Search';
//import Match from './Match';
//import Modal from './Modal';
//import L from 'leaflet';
//import Routing from "./RoutingMachine";
//import { Row, Col, Grid, Container } from 'react-bootstrap';
//import ErrorBoundary from '../ErrorBoundary/ErrorBoundary'



class Leaf extends Component {


    checkData=()=>{
        this.props.stations.data.stations.map(e=>{
          console.log(e)
        })
      }

    markerClick = (e) =>{
        console.log(e.target);
    }

    render() {

        let markers =null;
        if(this.props.showStations) {
        markers = (

            this.props.stations.data.stations.map((station) =>
                <Marker 
                    position={[station.lat, station.lon]}
                    onClick={this.markerClick.bind(station)}>
                </Marker>
                )

        )
        }


        const position = [this.props.viewport.latitude, this.props.viewport.longitude]
        //const position = [40.7484, -73.9857]
        return (
            <div>
                <button onClick={this.checkData}>check props</button>
                <Map center={position} zoom={14}>
                    <TileLayer
                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                      {markers}
                    <Marker position={position}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </Map>  
            </div>
        );
    }
}

export default Leaf;

1 Ответ

0 голосов
/ 01 ноября 2019

Не думаю, что вы хотите bind. bind предназначен для предоставления функции доступа к this. Нормальные переменные должны использоваться одним из следующих методов.

Вы можете встроить свою функцию в следующее: 

onClick={() => this.markerClick(station)}

или изменить сигнатуру своей функции и указать ее следующим образом: 

markerClick = (station) => (e) =>{
  console.log(station);
}

....

onClick={this.markerClick(station)}
...