javascript - 防止 react 简单 map 中的蓝色路径矩形

Question

所以我正在使用 react-simple-maps 来制作世界地图，但是当我点击 map 时的默认行为是围绕该国家/地区的蓝色矩形。我尝试在 onClick 上使用 preventDefault()，但无法摆脱它。有没有人知道如何解决这个问题？

这是我的代码。感谢您的帮助!

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGlobe,
  Geographies,
  Geography
} from "react-simple-maps"
import { Motion, spring } from "react-motion"

const mapStyles = {
  width: "90%",
  height: "auto"
}

class Map extends Component { 
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(geography, evt) {
    evt.preventDefault()
}
  render() {
    return (
        <div>
    <Motion
      defaultStyle={{
        x: this.props.center[0],
        y: this.props.center[1]
      }}
      style={{
        x: spring(this.props.center[0]),
        y: spring(this.props.center[1])
      }}
    >
      {({ x, y }) => (
        <ComposableMap
          width={500}
          height={500}
          projection="orthographic"
          projectionConfig={{ scale: 120 }}
          style={mapStyles}
        >
          <ZoomableGlobe center={[x, y]}>
            <circle
              cx={250}
              cy={250}
              r={120}
              fill="transparent"
              stroke="#CFD8DC"
            />

            <Geographies
              disableOptimization
              geography="https://gist.githubusercontent.com/GordyD/49654901b07cb764c34f/raw/27eff6687f677c984a11f25977adaa4b9332a2a9/countries-and-states.json"
            >
              {(geos, proj) =>
                geos.map((geo, i) => (
                  <Geography
                    key={geo.id + i}
                    geography={geo}
                    projection={proj}
                    style={{
                      default: { fill: "#CFD8DC" }
                    }}
                    onClick={this.handleClick}
                  />
                ))
              }
            </Geographies>
          </ZoomableGlobe>
        </ComposableMap>
      )}
    </Motion>
  </div>
      )
  }
}

Answer 1

在 Geography 组件上设置以下样式会删除所有交互中的边界矩形:

style={{
    default: {
        outline: 'none'
    },
    hover: {
        outline: 'none'
    },
    pressed: {
        outline: 'none'
    }
}}