Javascript React应用程序中的onClick事件在iOS设备上不工作
我对onClick事件（在Javascript React应用程序中的onClick事件在iOS设备上不工作,javascript,ios,reactjs,svg,onclick,Javascript,Ios,Reactjs,Svg,Onclick,我对onClick事件（在Geography组件中，这是一个SVG）有点问题，它不能在iOS设备上工作（在其他手机上测试时，它似乎工作正常）。我读了一些书，大家一致认为这是一个已知的错误，但通过添加光标：“指针”问题应该得到解决，但这并没有对我的情况产生影响，所以我认为这一定是一个不同的问题。有什么想法吗 import React, { memo, Component } from 'react'; import { ZoomableGroup, ComposableMap, Geographi
Geography光标：“指针”import React, { memo, Component } from 'react';
import { ZoomableGroup, ComposableMap, Geographies, Geography } from "react-simple-maps";
import geoUrl from "../data/topo.json";
import Country from './Country'
import { CSSTransition, SwitchTransition } from "react-transition-group";
class Map extends Component {
constructor(props){
super(props);
this.state = {
country: "",
dish: "",
description: "",
photo: "",
recipe: "",
selected: false,
}
}
handleEnter(country, dish, description, photo, recipe){
this.setState({
country: country,
dish: dish,
description: description,
photo: photo,
recipe: recipe
})
}
render(){
const { country, dish, description, photo, recipe, selected } = this.state;
const countries = geoUrl.objects.ne_50m_admin_0_countries.geometries;
return(
<SwitchTransition>
<CSSTransition
classNames="transition"
transitionAppearTimeout={50000}
timeout={500000}
key={ selected }
in={ selected }
unmountOnExit
appear
>
<>
<section className="map" id="home">
<header className="header">
<button className="headButton" onClick={ this.handleAbout }><a className="subHeading" href="#about">About</a></button>
<h1 className="heading">Food Atlas</h1>
<button className="headButton" onClick={ this.handleList }><a className="subHeading" href="#list">List</a></button>
</header>
<div className="container">
<ComposableMap width={1200} style={{ width: "100%" }} data-tip="" projectionConfig={{ scale: 200 }} >
<ZoomableGroup>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map(geo =>
<a href="#country" key={ geo.properties.NAME }>
<Geography
key={geo.rsmKey}
geography={geo}
onMouseOver={() => {
const { NAME } = geo.properties;
this.props.setTooltipContent(`${NAME}`);
}}
onMouseOut={() => {
this.props.setTooltipContent("");
}}
onClick={() => {
const { NAME, DISH, DESCRIPTION, PHOTO, RECIPE } = geo.properties;
this.handleEnter(NAME, DISH, DESCRIPTION, PHOTO, RECIPE);
}}
onTouchStart={() => {
const { NAME, DISH, DESCRIPTION, PHOTO, RECIPE } = geo.properties;
this.handleEnter(NAME, DISH, DESCRIPTION, PHOTO, RECIPE);
}}
fill="#44BBA4"
stroke="#E94F37"
strokeWidth="0.5"
style={{
default: {
outline: 'none'
},
hover: {
fill: "#E94F37",
outline: 'none'
},
pressed: {
outline: 'none'
},
cursor:'pointer'
}}
/>
</a>
)
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
</div>
</section>
</>
</CSSTransition>
</SwitchTransition>
);
}
}
export default memo(Map);
import React，{memo，Component}来自'React'；
从“react simple maps”导入{ZoomableGroup，ComposableMap，Geographies，Geographics}；
从“./data/topo.json”导入geoUrl；
从“/国家/地区”输入国家/地区
从“react transition group”导入{CSTransition，SwitchTransition}；
类映射扩展组件{
建造师（道具）{
超级（道具）；
此.state={
国家：“，
盘子：“，
说明：“，
照片：“，
配方：“，
选择：false，
}
}
handleEnter（国家、菜肴、描述、照片、食谱）{
这是我的国家({
国家:国家,，
菜：菜，
描述：描述，
照片:照片,，
食谱：食谱
})
}
render（）{
const{country，dish，description，photo，recipe，selected}=this.state；
const countries=geoUrl.objects.ne_50m_admin_0_countries.geometrics；
返回(
食品图谱
{（{geographies}）=>
geographies.map（地理=>
)
}
);
}
}
导出默认备忘录（Map）；