javascript - Onclick 渲染新组件并隐藏当前组件?
问题描述
UserManagementForm
当我们单击添加新用户按钮时,我正在尝试显示组件(请参见屏幕截图)。但是当我单击添加用户按钮时,表单会显示,但添加按钮不会从视图中删除。我只想在单击添加用户按钮后显示表单。为了展示我使用了一个状态变量。所以当我点击添加新用户按钮时,它应该只显示表单而不是卡片(见第一个截图)
代码:
import React, { Component } from 'react';
import UserManagementForm from './UserManagementForm';
import axios, { post } from 'axios';
class App extends Component {
constructor(props){
super(props);
this.state = {
userList:[],
showform:false
}
this.addUser = this.addUser.bind(this);
}
componentDidMount(){
if(window.sessionStorage.getItem("ud") !== null){
var _userData = JSON.parse(window.sessionStorage.getItem("ud"));
this.userDetails = _userData;
}
this.getAllUser();
}
getAllUser(){
axios({
method:"GET",
url:"http://62.210.93.54:6010/api/getAllUser",
auth:{
username:this.userDetails.email,
password:this.userDetails.password
}
}).then((response)=>{
console.log(response.data);
this.setState({
userList:response.data.results
})
})
}
displayUsers(){
return this.state.userList.map( user => {
return(
<div className="item-card">
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})
}
addUser(){
this.setState({
showform:true
});
}
render() {
return(
<div className="users-wrap">
<h1>Users</h1>
<div className="task-content">
<div className="user-wrap">
<div className="users">
<div className="item-card add" onClick = {this.addUser} >
<img src={require("../../images/plus.svg")} className="plus-icon"/>
<div className="lbl">Add a new User</div>
</div>
{this.displayUsers()}
{this.state.showform ? <UserManagementForm/> : null}
</div>
</div>
</div>
</div>
);
}
}
export default App;
初步看法:
单击添加新用户卡后,表单将显示在卡片下方,我只想显示表单,卡片应隐藏:
解决方案
你在寻找这样的东西吗?
当您单击“添加”时,按钮不会显示,用户也不会显示。
同时,将显示“添加”表单。
render() {
return (
<div className="users-wrap">
<h1>Users</h1>
<div className="task-content">
<div className="user-wrap">
<div className="users">
{!this.state.showform && [
<div className="item-card add" onClick={this.addUser} >
<img src={require("../../images/plus.svg")} className="plus-icon" />
<div className="lbl">Add a new User</div>
</div>,
this.displayUsers()
]
}
{this.state.showform && <UserManagementForm />}
</div>
</div>
</div>
</div>
);
}
推荐阅读
- python - 为什么我更改的 tkinter 小部件没有正确放置?
- laravel - Laravel 6 发送邮件
- iis - 代码在本地运行良好,但在托管后无法执行
- javascript - 按两个标准对数组进行排序
- c++ - 在实现文件中使用头文件的通用 lambda
- django - 过滤中介ManyToMany django
- javascript - 找不到“<%”的匹配结束标记
- python-3.x - 代码在 PyCharm 中工作,但是当我通过终端调用它时返回语法错误
- google-cloud-platform - Jenkins 机器中的多个 GCR 项目注册表登录
- mysql - Phabricator 安装问题“致命错误:无法加载“Arcanist”库。将“arcanist/”放在磁盘上的“phabricator/”旁边。”