我很难将参数传递给 onToggleOpen
函数 - 我渲染多个标记(这里只有 2 个用于简化),当我单击一个标记时,我想显示相应的 InfoWindow
为它。但是,当我现在单击标记时,不会触发 onToggleOpen
方法。
如果我从标记和 onToggleOpen
中删除索引,则显示和隐藏 InfoWindow
框的功能 - 但随后是所有 InfoWindow
盒子将同时打开和隐藏。
如何正确地将索引传递给 onToggleOpen
?
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
>
<Marker
key='1'
position={{ lat: -34.397, lng: 150.644 }}
onClick={props.onToggleOpen(1)}
>
{props.isOpen &&
<InfoWindow onCloseClick={props.onToggleOpen}>
<div>Something 1</div>
</InfoWindow>
}
</Marker>
<Marker
key='2'
position={{ lat: -33.867855, lng: 151.178897 }}
onClick={props.onToggleOpen(2)}
>
{props.isOpen &&
<InfoWindow onCloseClick={props.onToggleOpen}>
<div>Something 2</div>
</InfoWindow>
}
</Marker>
</GoogleMap>
))
export default class GoogleMapsSample extends React.Component {
constructor(props) {
super(props)
this.state = {
isOpen: false
}
this.onToggleOpen = this.onToggleOpen.bind(this);
}
onToggleOpen(index){
console.log('x');
//this.setState({isOpen: !this.state.isOpen})
if (this.state.isOpen === index) {
this.state.isOpen = false;
} else {
this.state.isOpen = index;
}
console.log(this.state.isOpen);
}
render() {
const { isOpen } = this.state;
console.log('isOpen: ', this.state.isOpen);
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<MyMapComponent
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDFD30jUKH0Cl8qrZoNCe-eEGQBIfApzE0"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
isOpen={isOpen}
onToggleOpen={this.onToggleOpen}
/>
</div>
);
}
}
编辑:我不确定属性 isOpen
已在此处更改
constructor(props) {
super(props)
this.state = {
isOpen: false
}
this.onToggleOpen = this.onToggleOpen.bind(this);
}
...
<Marker
key='1'
position={{ lat: -34.397, lng: 150.644 }}
onClick={()=>props.onToggleOpen(1)}
>
{props.isOpen === 1 &&
<InfoWindow onCloseClick={props.onToggleOpen}>
<div>Something 1</div>
</InfoWindow>
}
</Marker>
因为 InfoWindow
block 永远不会执行。我认为在我更改状态的函数中出了问题:
onToggleOpen(index){
//this.setState({isOpen: !this.state.isOpen})
if (this.state.isOpen === index) {
this.state.isOpen = false;
} else {
this.state.isOpen = index;
}
}
但这里的 this.state.isOpen
属性已正确更改(使用 console.log
进行测试)。但即使这里的 isOpen
发生了变化,点击标记后 InfoWindow
也永远不会显示。
我也尝试在构造函数中设置它的值,如下所示:
this.state = {
isOpen: false
}
并且 InfoWindow
在加载页面后显示,但是当我单击标记时,InfoWindow
没有任何反应,它不会消失并保持显示(即使尽管 onToggleOpen()
中的值已正确更改)。
我在这里忽略了什么?我是否错误地将值 isOpen
传递给 Marker
?
最佳答案
通过编写props.onToggleOpen(1)
,您实际上是在调用该函数。但我认为您需要在单击标记时调用它。
因此 Marker
组件的正确代码应如下所示:
<Marker
key='1'
position={{ lat: -34.397, lng: 150.644 }}
onClick={()=>props.onToggleOpen(1)}
>
{props.isOpen &&
<InfoWindow onCloseClick={props.onToggleOpen}>
<div>Something 1</div>
</InfoWindow>
}
</Marker>
注意()=>props.onToggleOpen(1)
。现在,当您单击标记时,这将调用 onToggleOpen
。
关于javascript - ReactJS - 将参数传递给函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51001276/