reactjs - 反应状态没有用togglepress更新
问题描述
我正在尝试通过自定义组件关闭和打开 react-google-maps 中的信息窗口。当我检查它是否已记录时,正在调用切换方法。这是代码:
/**
* Created by.
*/
import * as React from 'react'
import {Col, Row, Card, CardHeader, CardBody, CardColumns, CardText, CardFooter} from 'reactstrap'
import {InfoWindow, Marker} from 'react-google-maps'
export default class home extends React.Component {
state = {
isOpen: false
}
toggleOpen = () => {
this.setState(({ isOpen }) => (
{
isOpen: !isOpen,
}
));
if(this.state.isOpen)
console.log("state is open")
else
console.log("state is not open")
}
render()
{
const { isOpen } = this.state;
return (
<Marker
position={this.props.position}
onClick={this.toggleOpen}>
<InfoWindow isOpen={isOpen}>
<Card className="hovercard">
<Row>
<CardColumns sm={6} lg={3}>a
<CardHeader>
{this.props.homestay}
</CardHeader>
<CardText className="avatar">
<img alt="profile img" src={this.props.profilePic}/>
</CardText>
<div className="info">
<CardText>{this.props.descrip}</CardText>
</div>
<CardFooter>
{this.props.price}
</CardFooter>
</CardColumns>
</Row>
</Card>
</InfoWindow>
</Marker>
)
}
}
您可以在此处查看自己的代码: https ://codesandbox.io/s/93258nn8m4 我无法显示信息窗口 - 有什么想法吗?
解决方案
为了控制InfoWindow
可见性,您必须渲染或不渲染,而不是作为道具<InfoWindow />
传递。isOpen
这是你应该怎么做(根据官方文档):
{ isOpen && <InfoWindow>
<Card className="hovercard">
<Row>
<CardColumns sm={6} lg={3}>
a
<CardHeader>{this.props.homestay}</CardHeader>
<CardText className="avatar">
<img alt="profile img" src={this.props.profilePic} />
</CardText>
<div className="info">
<CardText>{this.props.descrip}</CardText>
</div>
<CardFooter>{this.props.price}</CardFooter>
</CardColumns>
</Row>
</Card>
</InfoWindow> }
推荐阅读
- java - 回收站视图不显示卡片/文本
- javascript - 有没有办法让选定的标签组合起来只显示匹配所有标签的项目?
- google-apps-script - 在指定日期连续替换某些单元格的脚本?
- python - 如何检查游标中的空结果?(烧瓶+ pymysql)
- amazon-web-services - 使用 Lambda 和 API 网关上传到 S3 后文件损坏
- python - python list的条件合并元素
- python - 如何子类化字典以支持泛型类型提示?
- python-3.x - 为什么 matplotlib 幅度谱函数似乎显示错误的幅度?
- .net - 供内部使用的新 Dot Net 应用程序
- reactjs - 如何使用 MonogDB 启动 Strapi