Question

我在点击添加新用户按钮时尝试显示UserManagementForm组件（请参见屏幕截图）。但是当我点击添加用户按钮时，表单会显示，但添加按钮不会从视图中删除。我只想在单击添加用户按钮后显示表单。为showform我使用了一个状态变量。因此，当我点击添加新用户按钮时，它应该只显示表单而不是CARD（参见第一个屏幕截图）

代码：

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;

初步观点：

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

Answer 1

你在找这样的东西吗？

当您点击＆＃34;添加＆＃34;时，按钮不会显示，用户也不会。

同时，＆＃34;添加＆＃34;将显示表格。

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

您可以对同一状态变量使用否定检查＆＃34; showForm＆＃34;隐藏添加按钮卡。下面的内容可以帮到你：

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

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

2 个答案: