React点击按钮渲染新组件并隐藏当前组件的实现问题

看起来你已经走对了用state控制组件显示的路子，但漏了关键一步：没有把原有添加按钮和卡片的显示逻辑绑定到同一个状态变量上。咱们只需要把这两部分的可见性和表单的显示状态关联起来，就能实现点击后只展示表单的效果。

具体修改步骤： #

1. 新增状态变量：在组件的state里加一个isAddingUser（名字可以自定义），初始值设为false，用来标记当前是否处于「添加用户」模式。
2. 绑定按钮点击事件：点击「添加新用户」按钮时，把isAddingUser切换为true，触发界面更新。
3. 条件渲染界面：在render方法里根据isAddingUser的值分支渲染——为true时只显示表单，为false时显示原来的按钮和用户卡片。

完整代码示例： #

import React, { Component } from 'react';
// 假设你已经导入了UserManagementForm及其他依赖组件

class UserManagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isAddingUser: false, // 新增状态变量，控制界面模式
      // 你的其他state变量（比如用户列表等）...
    };
  }

  // 点击添加按钮切换到表单模式
  handleToggleAddForm = () => {
    this.setState(prevState => ({
      isAddingUser: !prevState.isAddingUser
    }));
  };

  // 表单提交完成后回到原界面（可选，根据你的业务逻辑调整）
  handleFormSubmit = (formData) => {
    // 这里写你的表单提交逻辑：比如调用接口保存用户
    console.log('提交的用户数据：', formData);
    // 提交完成后切回原界面
    this.setState({ isAddingUser: false });
  };

  render() {
    const { isAddingUser } = this.state;

    // 如果处于添加用户模式，只渲染表单
    if (isAddingUser) {
      return (
        <div className="add-user-container">
          <UserManagementForm onSubmit={this.handleFormSubmit} />
          {/* 可以加个取消按钮，让用户能返回原界面 */}
          <button onClick={this.handleToggleAddForm} className="cancel-btn">取消</button>
        </div>
      );
    }

    // 非添加模式下，显示原有的按钮和用户卡片
    return (
      <div className="user-management-container">
        <button onClick={this.handleToggleAddForm}>添加新用户</button>
        {/* 你的用户卡片列表组件 */}
        <div className="user-cards">
          {/* 这里渲染用户卡片内容 */}
        </div>
      </div>
    );
  }
}

export default UserManagement;

关键逻辑说明： #

• 核心是用同一个状态变量控制界面的两种模式：正常浏览模式和添加用户模式，避免了表单和原有元素同时显示的问题。
• 额外添加的「取消」按钮是为了提升用户体验，你可以根据自己的需求决定是否保留。
• 如果表单提交后需要刷新用户列表，记得在handleFormSubmit里完成数据更新后再切换状态。

内容的提问来源于stack exchange，提问作者stone rock