在jVectorMap-React中获取国家名称



在React中,当在jVectorMap中单击国家时,如何获取国家的值并分配给输入?

地图:

<div className="col-md-7">
<div id="audience-map" className="vector-map"></div>
<VectorMap
map={"world_mill"}
backgroundColor="transparent"
panOnDrag={true}
containerClassName="dashboard-vector-map"
focusOn= { {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
}}
series={{
regions: [{
scale: ['#3d3c3c', '#f2f2f2'],
normalizeFunction: 'polynomial',
values: mapData
}]
}}
/>
</div>

点击国家/地区时要填充的输入:

<div className="form-group">
<select className="form-control form-control-lg" id="exampleFormControlSelect2">
<option>Country</option>
<option>United States of America</option>
<option>United Kingdom</option>
<option>India</option>
<option>Germany</option>
<option>Argentina</option>
<option>Kenya</option>
<option>Nigeria</option>
<option>South Africa</option>
</select>
</div>

我终于得到了这样选择的国家名称:

<div className="col-md-7">
<div id="audience-map" className="vector-map"></div>
<VectorMap
map={"world_mill"}
backgroundColor="transparent"
panOnDrag={true}
containerClassName="dashboard-vector-map"
onRegionClick={(e, countryCode) => this.setState({ countryCode: countryCode})}
focusOn= { {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
}}
series={{
regions: [{
scale: ['#3d3c3c', '#f2f2f2'],
normalizeFunction: 'polynomial',
values: mapData
}]
}}
/>
</div>

最新更新