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

Question

当我们点击添加新用户按钮时，我试图显示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;

初始视图：

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

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

Answer 2

您可以对同一状态变量“showForm”使用否定检查来隐藏“添加”按钮卡片。像下面这样的东西应该可以帮助你：

{ !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>
  : null
}