reactjs - 仅在单击输入时才在反应负载中进行叠加
问题描述
单击“添加数据”按钮时,我使用@WitVault 的代码显示叠加层;它工作正常,但只要页面加载,覆盖就会加载。我必须关闭覆盖才能看到我的主要内容。
我希望覆盖仅在单击按钮时出现,而不是在页面加载时出现。这是我的代码:
class registration extends Component{
constructor(props) {
super(props);
this.state = {
style : {
width : "100%"
}
};
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeNav);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeNav);
}
openNav() {
const style = { width : "100%" };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeNav);
}
closeNav() {
document.removeEventListener("click", this.closeNav);
const style = { width : 0 };
this.setState({ style });
document.body.style.backgroundColor = "#F3F3F3";
}
render(){
return(
<div class="encloser" id="test1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div>
<div class="addbuttondiv">
<button class="addbutton" onClick={this.openNav}>Add Data</button>
<div ref="snav" className = "overlay" style={this.state.style}>
<div className = "sidenav-container">
<div className = "text-center">
<h2>Form</h2>
<p>This is a sample input form</p>
</div>
<a href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeNav}
>
×
</a>
</div>
</div>
</div>
</div>
//some html content
</div>
);
}
}
export default registration;
CSS:
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* When the height of the screen is less than 450 pixels,
change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
解决方案
您必须在构造函数中将宽度设置为“0”,如下所示:
class registration extends Component{
constructor(props) {
super(props);
this.state = {
style : {
width : "0"
}
};
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeNav);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeNav);
}
openNav() {
const style = { width : "100%" };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeNav);
}
closeNav() {
document.removeEventListener("click", this.closeNav);
const style = { width : 0 };
this.setState({ style });
document.body.style.backgroundColor = "#F3F3F3";
}
render(){
return(
<div class="encloser" id="test1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div>
<div class="addbuttondiv">
<button class="addbutton" onClick={this.openNav}>Add Data</button>
<div ref="snav" className = "overlay" style={this.state.style}>
<div className = "sidenav-container">
<div className = "text-center">
<h2>Form</h2>
<p>This is a sample input form</p>
</div>
<a href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeNav}
>
×
</a>
</div>
</div>
</div>
</div>
//some html content
</div>
);
}
}
export default registration;
推荐阅读
- python - 用 BeautifulSoup 隔离脚本
- r - 可变长度不同帮助,lm回归和权重,变量具有相同的行数
- javascript - React useCallback linting 错误缺少依赖项
- sql-server - 设计查询 - 从第三方数据源中提取数据并在 UI 上显示
- python - Pandas Dataframes - 合并两个 Dataframes 但省略具有同一列的条目
- network-programming - 网卡启用混杂模式,单播数据包不会被嗅出
- javascript - Tensorflow/ffjs:使用 model.fit() 方法训练后嵌入层权重为 NaN
- python - 嵌套字典的值总和
- python - 如何参考python上的字典在列表中查找最高值元素
- ruby-on-rails - 如何实施市场:管理员端显示完整的订单以及购买的物品清单:我无法应对的挑战