Question

我用一些虚拟数据创建了一个弹出框组件。该弹出窗口可以正确处理其内容中的那些伪数据。现在，我有一些卡片盒，我正在使用此弹出框组件。现在的问题是，在单击第二张卡的弹出框的链接时，该容器显示在第一张卡的弹出框位置。如何限制这一点。我的意思是说，如果我单击第二个弹出框链接，它将显示在第二个位置，而不是其他任何位置。

这是我的代码：

//event handler
moreToggle(event){
 event.stopPropagation();
 event.preventDefault();
 this.setState({expanded: !this.state.expanded});
}
dissMorePop(){
this.setState({expanded: false});
}
render(){
let containerId ="body";
if((this.props.containerId !=null) &&(this.props.containerId != undefined)){
  containerId = this.props.containerId
}
return(
<div className="locationInfoScreen">
<a id ={"locationInfo"+this.props.infoId} className = "moreInfoLink">
  <span className ="showInfoClass" onClick ={this.moreToggle}>popLink</span></a>
<Overlay show = {this.state.expanded} target = {document.getElementById("locationInfo"+this.props.infoId)} placement ="bottom" shouldUpdatePosition ={true} container ={document.getElementById(containerId)} rootClose ={true} onHide={this.dissMorePop}>
<Popover id ={this.props.infoId} className={this.props.popoverClass} title="Location Info">
 <PopOverContent/>
</Popover></Overlay>
</div>
);
}

第二个问题 如果我们向上滚动页面，此弹出窗口将会增加。我想在滚动页面时隐藏此弹出窗口。该怎么做？

在点击时显示特定的弹出框-反应

0 个答案: