通过 react + ant-d 实现一个用户管理功能

使用React和Ant Design来实现一个用户管理功能非常简单。首先，我们需要创建一个React应用程序。可以使用脚手架工具（如Create React App）来快速搭建起一个React应用的基本结构。

1. 创建React应用程序
使用以下命令来创建一个新的React应用程序：

npx create-react-app user-management
cd user-management

2. 安装Ant Design
在项目根目录下运行以下命令来安装Ant Design依赖项：

npm install antd

3. 集成Ant Design组件
编辑src/App.js文件，导入所需的Ant Design组件并编写用户管理功能的代码。以下是一个简单的示例：

import React, { useState } from 'react';
import { Table, Button, Modal, Form, Input } from 'antd';

const App = () => {
  const [users, setUsers] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age' },
    { title: '操作', key: 'action', render: (text, record) => <Button onClick={() => deleteUser(record.key)}>删除</Button> }
  ];

  const [form] = Form.useForm();

  const addUser = () => {
    form.validateFields().then(values => {
      const user = { name: values.name, age: values.age, key: users.length + 1 };
      setUsers([...users, user]);
      form.resetFields();
      setIsModalVisible(false);
    });
  };

  const deleteUser = (key) => {
    setUsers(users.filter(user => user.key !== key));
  };

  return (
    <div>
      <Button onClick={() => setIsModalVisible(true)}>添加用户</Button>
      <Table dataSource={users} columns={columns} />

      <Modal title="添加用户" visible={isModalVisible} onCancel={() => setIsModalVisible(false)} onOk={addUser}>
        <Form form={form}>
          <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="age" label="年龄" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default App;

4. 运行应用
使用以下命令来运行应用程序：

npm start

应用程序将在浏览器中自动打开。您现在就可以通过点击“添加用户”按钮来添加用户，点击“删除”按钮来删除用户，并且可以通过Ant Design的Table组件来显示用户列表。