javascript - Onclick渲染新组件并隐藏当前组件？

Question

当我们单击“添加新用户”按钮时，我试图显示UserManagementForm组件(参见屏幕截图)。但是，当我单击添加用户按钮时，会显示表单，但添加按钮不会从 View 中删除。我只想在单击添加用户按钮后显示表单。为了显示形式，我使用了状态变量。因此，当我单击“添加新用户”按钮时，它应该只显示表单而不是卡(请参见第一个屏幕截图)

代码:

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;

初始 View :

点击添加新用户卡后，表单将显示在卡下方，我只想显示表单，而卡应隐藏:

Answer 1

您正在寻找这样的东西吗？

当您单击“添加”时，该按钮将不会显示，用户也不会显示。

同时，将显示“添加”表单。

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>
    );
}