Jvectormap: метка не исчезает после маршрутизации - PullRequest
Новая
       26

Jvectormap: метка не исчезает после маршрутизации

0 голосов
/ 07 июля 2019

Я сделал карту, используя Jvectormap. Когда происходит щелчок по стране, я делаю перенаправление с помощью react-router-dom на страницу страны. Проблема у меня в том, что ярлык страны остается на экране после перенаправления.

Вот моя карта: [1]: https://i.stack.imgur.com/VV6zZ.png

Вот мой маршрут после: https://i.stack.imgur.com/yUqKl.png

как видите, ярлык остается на странице, даже если я изменил маршрут.

Я попытался полностью стереть ярлык с помощью: 

onRegionTipShow={function(e, el, code) {e.preventDefault();}}

но это не совсем то, что я хочу, поскольку это полностью стирает метки.

Вот компонент карты: 

import React from "react";
import { VectorMap } from "react-jvectormap";

const countries = require("country-list");

export default class Map extends React.Component {
  state = {
    isLoading: true, // gestion du chargement
    mapData: {}
  };

  async componentDidMount() {
    this.setState({
      isLoading: false, 
      mapData: {
        FR: 1,
        US: 0,
        BE: 0,
        KH: 0,
        CO: 0,
        EC: 0,
        IT: 0,
        LA: 0,
        LU: 0,
        MC: 0,
        MM: 0,
        PT: 0,
        RU: 0,
        ES: 0,
        CH: 0,
        TH: 0,
        TN: 0,
        VN: 0,
        NO: 0,
        GB: 0,
        MA: 0,
        DE: 0,
        NL: 0,
        AT: 0
      }
    });
  }
  // Gestion des événenemts :
  handleClick = (event, code) => {
    this.props.changeState(code);
  };

  render() {
    if (this.state.isLoading) {
      console.log("loading");
      return null;
    }
    return (
      <div>
        <div className="map-container">
          <VectorMap
            onRegionClick={this.handleClick}
            map={"world_mill"}
            backgroundColor="pink"
            ref="map"
            containerStyle={{
              height: "100%"
            }}
            containerClassName="map"
            regionStyle={{
              initial: {
                fill: "#e4e4e4",
                "fill-opacity": 0.9,
                stroke: "none",
                "stroke-width": 0,
                "stroke-opacity": 0
              },
              hover: {
                "fill-opacity": 0.8,
                cursor: "pointer"
              },

              selectedHover: {}
            }}

            series={{
              regions: [
                {
                  values: this.state.mapData, //this is your data
                  scale: ["#417DD7", "#EF6B93"] //your color game's here
                }
              ]
            }}
          />
        </div>
      </div>
    );
  }
}

Вот компонент приложения с маршрутизацией: 

import React from "react";
import "./App.css";
import Map from "./components/Map";
import Header from "./components/shared/Header";
import Footer from "./components/shared/Footer";

//countries
import France from "./components/countries/France";

import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

export default class App extends React.Component {

  state = {
    isLoading: true, // gestion du chargement
    page: "Map"
  };

  async componentDidMount() {
    this.setState({
      isLoading: false // le chargement a été fait
    });
  }

  // Gestion des événenemts :
  changeState = direction => {
    this.setState({ page: direction });
  };

  render() {
    if (this.state.isLoading) {
      console.log("loading");
      return null;
    }

    return (
      <Router>
        <Route
          exact
          path="/"
          render={() => {
            if (this.state.page === "FR") {
              return <Redirect to="/france" />;
            }
            return (
              <div>
                <Map changeState={this.changeState} page= {this.state.page} />

              </div>
            );
          }}
        />
        <Route path="/france" component={France} />
      </Router>
    );
  }
}```
...