React + Ant Design 实战教程：手把手实现增删查改列表》 《React 中使用 Ant Design：从安装到实现 CRUD 功能》 《Ant Design 入门指南：在 React

已于 2025-01-24 17:36:59 修改
阅读量1k 收藏 9
点赞数 19
分类专栏： 前端开发 文章标签： react.js javascript 前端 网页设计 reactjs react教程 react crud
于 2025-01-24 17:31:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/145344300
版权

效果图

在这里插入图片描述
在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

博客正文

React + Ant Design 实战教程：手把手实现增删查改列表

目录
  1. 什么是 Ant Design？
  2. 安装和配置 Ant Design
  3. 实现一个包含增删查改的列表
    • 3.1 创建表格组件
    • 3.2 实现添加功能
    • 3.3 实现删除功能
    • 3.4 实现编辑功能
    • 3.5 实现查询功能
  4. 完整代码
  5. 下一步学习建议

1. 什么是 Ant Design？

Ant Design 是一个由阿里巴巴团队开发的企业级 UI 组件库，提供了丰富的组件和设计规范，帮助开发者快速构建高质量的 Web 应用。它支持 React、Vue 和 Angular 等多种前端框架。

2. 安装和配置 Ant Design

步骤 1：创建 React 项目

如果你还没有 React 项目，可以使用 Create React App 创建一个新项目：

npx create-react-app antd-demo
cd antd-demo
步骤 2：安装 Ant Design

在项目目录中运行以下命令安装 Ant Design：

npm install antd

或者（如果你使用 yarn）：

yarn add antd
步骤 3：引入 Ant Design 样式

在 src/index.js 文件中引入 Ant Design 的样式：

import 'antd/dist/reset.css'; // 引入 Ant Design 的样式

3. 实现一个包含增删查改的列表

我们将使用 Ant Design 的 Table、Button、Input、Modal 等组件来实现一个包含增删查改功能的列表。

3.1 创建表格组件

  1. 在 src 目录下创建一个新文件 UserList.js：

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

const UserList = () => {
  const [data, setData] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
  ]);

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <span>
          <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
          <Button type="link" danger onClick={() => handleDelete(record.id)}>删除</Button>
        </span>
      ),
    },
  ];

  return (
    <div>
      <Table dataSource={data} columns={columns} rowKey="id" />
    </div>
  );
};

export default UserList;

  2. 在 src/App.js 中使用 UserList 组件：

    import React from 'react';
import UserList from './UserList';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <UserList />
    </div>
  );
}

export default App;

  3. 运行项目，你会看到一个包含数据的表格。

3.2 实现添加功能

  1. 在 UserList.js 中添加一个“添加用户”按钮和模态框：

    const UserList = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();

  const handleAdd = () => {
    form.validateFields().then((values) => {
      const newUser = { id: data.length + 1, ...values };
      setData([...data, newUser]);
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  return (
    <div>
      <Button type="primary" onClick={() => setIsModalVisible(true)} style={{ marginBottom: '16px' }}>
        添加用户
      </Button>
      <Table dataSource={data} columns={columns} rowKey="id" />

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

  2. 现在你可以点击“添加用户”按钮，弹出模态框并添加新用户。

3.3 实现删除功能

  1. 在 UserList.js 中添加删除逻辑：

    const handleDelete = (id) => {
  setData(data.filter((item) => item.id !== id));
};

  2. 现在你可以点击“删除”按钮删除用户。

3.4 实现编辑功能

  1. 在 UserList.js 中添加编辑逻辑：

    const [editingUser, setEditingUser] = useState(null);

const handleEdit = (record) => {
  setEditingUser(record);
  form.setFieldsValue(record);
  setIsModalVisible(true);
};

const handleUpdate = () => {
  form.validateFields().then((values) => {
    const updatedData = data.map((item) =>
      item.id === editingUser.id ? { ...item, ...values } : item
    );
    setData(updatedData);
    setIsModalVisible(false);
    setEditingUser(null);
    form.resetFields();
  });
};

  2. 修改模态框的逻辑，支持编辑和添加：

    <Modal
  title={editingUser ? '编辑用户' : '添加用户'}
  visible={isModalVisible}
  onOk={editingUser ? handleUpdate : handleAdd}
  onCancel={() => {
    setIsModalVisible(false);
    setEditingUser(null);
    form.resetFields();
  }}
>
  <Form form={form}>
    <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
      <Input />
    </Form.Item>
    <Form.Item label="年龄" name="age" rules={[{ required: true, message: '请输入年龄' }]}>
      <Input type="number" />
    </Form.Item>
  </Form>
</Modal>

  3. 现在你可以点击“编辑”按钮修改用户信息。

3.5 实现查询功能

  1. 在 UserList.js 中添加查询功能：

    const [searchText, setSearchText] = useState('');

const handleSearch = (value) => {
  setSearchText(value);
};

const filteredData = data.filter((item) =>
  item.name.toLowerCase().includes(searchText.toLowerCase())
);

  2. 在表格上方添加搜索框：

    <Input.Search
  placeholder="搜索姓名"
  onSearch={handleSearch}
  style={{ width: 200, marginBottom: '16px' }}
/>

  3. 修改表格的 dataSource：

    <Table dataSource={filteredData} columns={columns} rowKey="id" />

4. 完整代码

以下是 UserList.js 的完整代码：

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

const UserList = () => {
  const [data, setData] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
  ]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [searchText, setSearchText] = useState('');
  const [form] = Form.useForm();

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <span>
          <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
          <Button type="link" danger onClick={() => handleDelete(record.id)}>删除</Button>
        </span>
      ),
    },
  ];

  const handleAdd = () => {
    form.validateFields().then((values) => {
      const newUser = { id: data.length + 1, ...values };
      setData([...data, newUser]);
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };

  const handleEdit = (record) => {
    setEditingUser(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleUpdate = () => {
    form.validateFields().then((values) => {
      const updatedData = data.map((item) =>
        item.id === editingUser.id ? { ...item, ...values } : item
      );
      setData(updatedData);
      setIsModalVisible(false);
      setEditingUser(null);
      form.resetFields();
    });
  };

  const handleSearch = (value) => {
    setSearchText(value);
  };

  const filteredData = data.filter((item) =>
    item.name.toLowerCase().includes(searchText.toLowerCase())
  );

  return (
    <div>
      <Input.Search
        placeholder="搜索姓名"
        onSearch={handleSearch}
        style={{ width: 200, marginBottom: '16px' }}
      />
      <Button type="primary" onClick={() => setIsModalVisible(true)} style={{ marginBottom: '16px' }}>
        添加用户
      </Button>
      <Table dataSource={filteredData} columns={columns} rowKey="id" />

      <Modal
        title={editingUser ? '编辑用户' : '添加用户'}
        visible={isModalVisible}
        onOk={editingUser ? handleUpdate : handleAdd}
        onCancel={() => {
          setIsModalVisible(false);
          setEditingUser(null);
          form.resetFields();
        }}
      >
        <Form form={form}>
          <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="年龄" name="age" rules={[{ required: true, message: '请输入年龄' }]}>
            <Input type="number" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default UserList;

5. 下一步学习建议

  • 深入学习 Ant Design：探索更多 Ant Design 组件（如 Form、Modal、Select 等）。
  • 状态管理：学习 Redux 或 Context API 管理全局状态。
  • 路由管理：使用 React Router 实现多页面导航。
  • 实战项目：尝试构建一个完整的后台管理系统。

总结

通过这篇教程，你已经学会了如何在 React 中使用 Ant Design 组件，并实现了一个包含增删查改功能的列表。希望这篇教程能帮助你快速上手 Ant Design 开发！

如果有其他问题，欢迎随时提问！

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值