首页手记 AntDesign使用入门教程

AntDesign使用入门教程

标签：

前端工具 React.JS Vue.js

概述

本文详细介绍了AntDesign使用方法，包括安装、初始化项目、常用组件用法、样式与主题定制、响应式布局与适配以及表单与验证。通过丰富的示例和代码，帮助开发者快速掌握AntDesign的各项功能。

AntDesign介绍与安装

Ant Design（简称AntD）是由蚂蚁金服开源的一套企业级UI设计语言与React组件库，它不仅提供了丰富的组件来帮助开发者构建界面，还注重用户体验和开发效率。Ant Design秉承了“以用户为中心”的设计理念，广泛应用于电商、金融、政务等多个领域。

安装Ant Design

安装Ant Design有多种方式，常见的有NPM安装、Yarn安装和CDN引入。下面分别介绍这几种安装方法。

NPM安装

如果你的项目使用了NPM作为依赖管理工具，可以通过运行以下命令来安装Ant Design：

npm install antd --save

安装完成后，你可以在项目中引入Ant Design。

Yarn安装

如果你使用的是Yarn作为依赖管理工具，可以通过运行以下命令来安装Ant Design：

yarn add antd

安装完成后，同样可以在项目中引入Ant Design。

CDN引入

如果你不想使用NPM或Yarn来管理依赖，可以选择通过CDN引入Ant Design。在HTML文件中引入Ant Design CSS和JS文件：

<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.min.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/antd/dist/antd.min.js"></script>

引入完成后，你可以在HTML中直接使用Ant Design的组件。

初始化Ant Design项目

安装好Ant Design后，你还需要初始化一个Ant Design项目。这里以React项目为例，演示如何初始化并使用Ant Design。

创建React项目

首先，创建一个新的React项目。如果你还没有安装create-react-app，可以通过以下命令全局安装：

npm install -g create-react-app

然后，创建一个新的React项目：

create-react-app my-antd-project
cd my-antd-project

安装Ant Design

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

npm install antd --save

引入Ant Design

在src目录下的index.js或App.js文件中，引入Ant Design：

import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider>
      <div className="App">
        Hello Ant Design
      </div>
    </ConfigProvider>
  );
}

export default App;

在上述代码中，ConfigProvider组件是一个配置提供者，它允许你在整个应用中设置和传递配置，如默认主题、语言等。

小结

通过上述步骤，你已经成功安装并初始化了一个使用Ant Design的React项目。接下来可以开始使用Ant Design的各类组件来构建界面了。

常用组件使用方法

Ant Design提供了丰富的组件库，包括按钮、表格、卡片、模态框等，这些组件可以帮助你快速构建功能完善的用户界面。本节将介绍一些常用的组件及其使用方法。

按钮组件

按钮是界面中最常用的组件之一，Ant Design提供了多种样式的按钮供你选择，包括默认按钮、主要按钮、危险按钮等。

基本用法

import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">主要按钮</Button>
      <Button>默认按钮</Button>
      <Button type="danger">危险按钮</Button>
    </div>
  );
}

export default App;

负责状态

按钮还可以显示不同的状态，如加载状态、禁用状态等。

import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary" loading>加载中</Button>
      <Button type="primary" disabled>已禁用</Button>
    </div>
  );
}

export default App;

Icon按钮

按钮组件还可以结合图标使用，方便用户识别按钮的功能。

import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary" shape="circle" icon="plus" />
    </div>
  );
}

export default App;

表格组件

表格组件用于展示数据列表，支持分页、排序、筛选等功能。

基本用法

import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];

const data = [
  {
    name: '张三',
    age: 24,
  },
  {
    name: '李四',
    age: 27,
  },
];

function App() {
  return (
    <Table columns={columns} dataSource={data} />
  );
}

export default App;

分页

表格组件支持分页显示数据，通过配置pagination属性即可实现。

import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];

const data = [
  {
    name: '张三',
    age: 24,
  },
  {
    name: '李四',
    age: 27,
  },
];

function App() {
  return (
    <Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
  );
}

export default App;

卡片组件

卡片组件常用于展示数据或图片，使得信息更加清晰易读。

基本用法

import { Card } from 'antd';

function App() {
  return (
    <Card title="标题" extra={<a href="">更多</a>}>
      <p>卡片内容</p>
    </Card>
  );
}

export default App;

配置卡片头和卡片尾

可以通过headStyle和bodyStyle属性来配置卡片的头部和主体部分的样式。

import { Card } from 'antd';

function App() {
  return (
    <Card
      title="标题"
      headStyle={{ color: '#f50' }}
      bodyStyle={{ color: '#00f' }}
    >
      <p>卡片内容</p>
    </Card>
  );
}

export default App;

模态框组件

模态框组件用于显示需要用户输入信息的对话框，支持多种形式的输入，如输入框、选择器等。

基本用法

import { Modal } from 'antd';
import React, { useState } from 'react';

function App() {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <button type="button" onClick={showModal}>显示模态框</button>
      <Modal
        title="模态框标题"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>模态框内容</p>
      </Modal>
    </div>
  );
}

export default App;

配置遮罩层和标题

可以通过配置mask属性来控制是否显示遮罩层，通过配置title属性来设置标题。

import { Modal } from 'antd';
import React, { useState } from 'react';

function App() {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <button type="button" onClick={showModal}>显示模态框</button>
      <Modal
        title="模态框标题"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        mask={false}
        closable={false}
      >
        <p>模态框内容</p>
      </Modal>
    </div>
  );
}

export default App;

小结

通过本节的学习，你已经掌握了Ant Design中一些常用组件的基本用法，如按钮、表格、卡片和模态框等。这些组件可以帮助你快速构建功能完善的用户界面。更多组件的详细用法请参考Ant Design官方文档。

AntDesign样式与主题定制

Ant Design不仅提供了丰富的组件库，还支持样式与主题的定制。通过定制样式与主题，你可以根据项目需求调整组件的外观，使应用界面更加符合设计规范。

使用CSS变量进行定制

Ant Design使用CSS变量来控制组件的默认样式。通过覆盖这些变量，你可以改变组件的颜色、字体等属性。

基本用法

首先，定义一个样式文件，如custom-variables.css，并在其中覆盖CSS变量：

:root {
  --primary-color: #1890ff; /* 主要颜色 */
  --success-color: #52c41a; /* 成功颜色 */
}

然后在项目中引入这个样式文件：

import 'antd/dist/antd.css';
import './custom-variables.css';

function App() {
  return (
    <div>
      <Button type="primary">主要按钮</Button>
    </div>
  );
}

export default App;

自定义主题

你还可以通过Ant Design的ThemeProvider组件来自定义主题，覆盖全局样式的颜色、字体等属性。

import { ThemeProvider } from 'antd';
import React from 'react';

function App() {
  return (
    <ThemeProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          colorPrimaryHover: '#0052cc',
        },
      }}
    >
      <Button type="primary">主要按钮</Button>
    </ThemeProvider>
  );
}

export default App;

使用Less变量进行定制

Ant Design还提供了使用Less变量来定制样式的能力。通过覆盖Less变量，你可以更灵活地调整组件的样式。

基本用法

首先，定义一个.less样式文件，如custom.less，并在其中覆盖Less变量：

@primary-color: #1890ff;
@success-color: #52c41a;

@import '~antd/dist/antd.less';

然后在项目中引入这个样式文件：

import './custom.less';

function App() {
  return (
    <div>
      <Button type="primary">主要按钮</Button>
    </div>
  );
}

export default App;

复杂定制

你还可以通过覆盖更多的Less变量来实现更复杂的样式定制。

@primary-color: #1890ff;
@success-color: #52c41a;

@import '~antd/dist/antd.less';

@btn-primary-bg: @primary-color;
@btn-primary-color: white;
@btn-primary-hover-bg: darken(@btn-primary-bg, 10%);
@btn-primary-hover-color: white;

通过CSS自定义样式

除了使用CSS变量和Less变量，你还可以直接通过CSS覆盖组件的样式。

基本用法

在项目的CSS文件中定义覆盖样式：

.ant-btn-primary {
  background-color: #1890ff !important;
  border-color: #1890ff !important;
}

然后在项目中引入这个样式文件：

import './custom-style.css';

function App() {
  return (
    <div>
      <Button type="primary">主要按钮</Button>
    </div>
  );
}

export default App;

组件内部样式

你还可以在组件内部使用CSS模块化来覆盖样式。

import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles['ant-btn-primary']}>
      <Button type="primary">主要按钮</Button>
    </div>
  );
}

export default App;

/* App.module.css */
.ant-btn-primary {
  background-color: #1890ff !important;
  border-color: #1890ff !important;
}

小结

通过本节的学习，你已经掌握了使用CSS变量、Less变量以及直接通过CSS覆盖样式来定制Ant Design组件的方法。这些方法可以帮助你根据项目需求调整组件的外观，使应用界面更加符合设计规范。更多定制样式的细节，请参考Ant Design的官方文档。

响应式布局与适配

在现代Web应用开发中，响应式布局是一个重要的设计原则，它能够让应用在不同设备和屏幕尺寸上保持良好的用户体验。Ant Design提供了多种功能来帮助开发者实现响应式布局和适配。

响应式布局

Ant Design提供了多种响应式布局组件来适应不同的屏幕尺寸。这些组件可以自动调整布局，在不同的设备上显示不同的样式。

基本用法

Ant Design中的响应式布局组件通常使用栅格系统来实现。以下是一个简单的响应式布局示例：

import { Row, Col, Button } from 'antd';
import React from 'react';

function App() {
  return (
    <Row>
      <Col span={24}>
        <Button type="primary">按钮</Button>
      </Col>
    </Row>
  );
}

export default App;

响应式栅格布局

Ant Design还提供了栅格布局组件，支持响应式布局。你可以根据屏幕宽度调整列的宽度和偏移量。

import { Row, Col, Button } from 'antd';
import React from 'react';

function App() {
  return (
    <Row>
      <Col span={12} lg={6} md={8} sm={12} xs={24}>
        <Button type="primary">按钮</Button>
      </Col>
      <Col span={12} lg={18} md={16} sm={12} xs={24}>
        <Button type="primary">按钮</Button>
      </Col>
    </Row>
  );
}

export default App;

适配

除了响应式布局，Ant Design还提供了多种适配功能，帮助开发者在不同的设备上实现一致的用户体验。

媒体查询

Ant Design支持使用CSS媒体查询来实现不同屏幕尺寸下的样式适配。例如，可以通过媒体查询设置不同屏幕尺寸下的字体大小、布局等。

/* custom.css */
@media screen and (max-width: 768px) {
  .ant-btn-primary {
    font-size: 14px;
  }
}

在项目中引入这个样式文件：

import './custom.css';

function App() {
  return (
    <div>
      <Button type="primary">按钮</Button>
    </div>
  );
}

export default App;

Flexbox布局

使用Flexbox布局可以帮助你更灵活地调整组件在不同屏幕尺寸下的布局。

import { Row, Col, Button } from 'antd';
import React from 'react';

function App() {
  return (
    <Row justify="space-around" align="middle">
      <Col>
        <Button type="primary">按钮</Button>
      </Col>
      <Col>
        <Button type="primary">按钮</Button>
      </Col>
    </Row>
  );
}

export default App;

Flex布局组件

Ant Design还提供了一些专门的Flex布局组件，如Flex, Space等，可以方便地实现响应式布局。

import { Flex, Button } from 'antd';
import React from 'react';

function App() {
  return (
    <Flex>
      <Button type="primary">按钮</Button>
      <Button type="primary">按钮</Button>
      <Button type="primary">按钮</Button>
    </Flex>
  );
}

export default App;

小结

通过本节的学习，你已经掌握了Ant Design中实现响应式布局和适配的方法。这些方法可以帮助你在不同设备和屏幕尺寸上保持一致的用户体验。更多响应式布局和适配的细节，请参考Ant Design的官方文档。

AntDesign表单与验证

在Web应用开发中，表单是一个非常重要的组件，它用于收集用户数据。Ant Design提供了丰富的表单组件和验证功能，可以帮助开发者快速构建功能完善的表单。

基本表单

Ant Design中使用Form组件创建表单，通过设置Form组件的属性和方法，可以实现表单的创建和提交。

创建表单

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

function App() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

export default App;

表单分步

对于复杂的表单，可以使用Form组件的分步功能，实现多步骤表单。

import { Form, Input, Button, Steps, Step } from 'antd';
import React, { useState } from 'react';

const steps = [
  { title: '基本信息', content: <Input placeholder="请输入基本信息" /> },
  { title: '联系方式', content: <Input placeholder="请输入联系方式" /> },
];

function App() {
  const [form] = Form.useForm();
  const [current, setCurrent] = useState(0);

  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Steps current={current}>
        {steps.map((item) => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <Form.Item noStyle>
        {steps[current].content}
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={next} disabled={current === steps.length - 1}>
          下一步
        </Button>
        {current > 0 && (
          <Button onClick={prev}>
            上一步
          </Button>
        )}
      </Form.Item>
    </Form>
  );
}

export default App;

表单验证

Ant Design提供了丰富的表单验证规则，帮助开发者实现表单的数据校验。

简单验证

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

function App() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          { required: true, message: '请输入用户名' },
          { min: 4, message: '用户名至少为4个字符' },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          { required: true, message: '请输入密码' },
          { min: 6, message: '密码至少为6个字符' },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

export default App;

自定义验证

除了内置的验证规则，Ant Design还支持自定义验证函数，实现更复杂的验证逻辑。

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

function App() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const validateUsername = (rule, value) => {
    if (!value) {
      return Promise.reject(new Error('请输入用户名'));
    }
    if (value.length < 4) {
      return Promise.reject(new Error('用户名至少为4个字符'));
    }
    return Promise.resolve();
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          { required: true, message: '请输入用户名' },
          { validator: validateUsername },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          { required: true, message: '请输入密码' },
          { min: 6, message: '密码至少为6个字符' },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

export default App;

依赖验证

Ant Design还支持依赖验证，即一个字段的验证依赖于另一个字段的值。

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

function App() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const validateConfirmPassword = (rule, value) => {
    if (!value || value !== form.getFieldValue('password')) {
      return Promise.reject('两次输入的密码不一致');
    }
    return Promise.resolve();
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          { required: true, message: '请输入密码' },
          { min: 6, message: '密码至少为6个字符' },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        name="confirmPassword"
        label="确认密码"
        dependencies={['password']}
        rules={[
          { required: true, message: '请输入确认密码' },
          { validator: validateConfirmPassword },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

export default App;

表单提交

Ant Design提供了多种方式来提交表单数据，包括使用onFinish回调函数、表单实例的validateFields方法等。

使用`onFinish`回调函数

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

function App() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="用户名"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

export default App;

使用`validateFields`方法

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

function App() {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    form.validateFields()
      .then(values => {
        console.log('Received values of form: ', values);
      })
      .catch(errorInfo => {
        console.log('Validate failed: ', errorInfo);
      });
  };

  return (
    <Form form={form}>
      <Form.Item
        name="username"
        label="用户名"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={handleSubmit}>提交</Button>
      </Form.Item>
    </Form>
  );
}

export default App;

小结

通过本节的学习，你已经掌握了Ant Design中创建和提交表单的方法，以及表单的验证规则。这些功能可以帮助你快速构建功能完善的表单。更多表单的详细用法，请参考Ant Design的官方文档。

AntDesign项目实践案例

为了帮助你更好地理解Ant Design在实际项目中的应用，本节将通过一个简单的项目案例来演示如何使用Ant Design构建一个完整的应用。这个应用是一个简单的任务管理器，用户可以添加、编辑和删除任务。

项目结构

首先，我们定义项目的结构。假设项目根目录下包含以下文件和文件夹：

my-task-manager/
├── src/
│   ├── components/
│   │   ├── TaskList.js
│   │   └── TaskForm.js
│   ├── App.js
│   └── index.js
├── public/
│   └── index.html
├── package.json
└── README.md

TaskList.js：任务列表组件，用于显示任务列表和操作按钮。
TaskForm.js：任务表单组件，用于添加和编辑任务。
App.js：应用的主要入口文件。
index.js：React应用的入口文件。

TaskList组件

TaskList组件用于显示任务列表，并提供添加和删除任务的功能。

// TaskList.js
import { List, Button, Space, Typography } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import React, { useState } from 'react';

const TaskList = ({ tasks, onTaskDelete, onTaskEdit }) => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <List
        dataSource={tasks}
        renderItem={item => (
          <List.Item
            actions={[
              <Button icon={<EditOutlined />} onClick={onTaskEdit(item.id)}>编辑</Button>,
              <Button icon={<DeleteOutlined />} onClick={() => onTaskDelete(item.id)}>删除</Button>,
            ]}
          >
            <Typography.Text>{item.title}</Typography.Text>
          </List.Item>
        )}
      />
      <Button type="primary" onClick={showModal}>添加任务</Button>
      <Modal
        title="添加任务"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <TaskForm onTaskAdd={tasks => console.log(tasks)} />
      </Modal>
    </div>
  );
};

export default TaskList;

TaskForm组件

TaskForm组件用于添加和编辑任务，并进行表单验证。

// TaskForm.js
import { Form, Input, Button, Modal } from 'antd';
import React, { useState } from 'react';

const TaskForm = ({ id, onTaskUpdate, onTaskAdd }) => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    if (id) {
      onTaskUpdate(values);
    } else {
      onTaskAdd(values);
    }
    form.resetFields();
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="title"
        label="任务标题"
        rules={[{ required: true, message: '请输入任务标题' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default TaskForm;

App组件

App组件是应用的主要入口文件，负责管理任务数据并调用TaskList和TaskForm组件。

// App.js
import React, { useState } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';

const App = () => {
  const [tasks, setTasks] = useState([
    { id: 1, title: '任务1' },
    { id: 2, title: '任务2' },
  ]);

  const addTask = (task) => {
    setTasks([...tasks, { id: tasks.length + 1, title: task.title }]);
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  const editTask = (id) => {
    const newTasks = tasks.map(task => task.id === id ? { ...task, editing: true } : task);
    setTasks(newTasks);
  };

  const updateTask = (updatedTask) => {
    setTasks(tasks.map(task => task.id === updatedTask.id ? { ...task, ...updatedTask, editing: false } : task));
  };

  const renderTasks = () => {
    return tasks.map(task => (
      <TaskForm key={task.id} id={task.id} onTaskAdd={addTask} onTaskUpdate={updateTask} />
    ));
  };

  return (
    <div>
      <TaskList tasks={tasks} onTaskDelete={deleteTask} onTaskEdit={editTask} />
      {renderTasks()}
    </div>
  );
};

export default App;

项目入口文件

项目的入口文件通常位于src/index.js，用于启动React应用。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

运行项目

要运行项目，首先确保已经安装了所有依赖包。在项目的根目录下，运行以下命令：

npm install
npm start

现在，你可以访问localhost:3000来查看项目运行情况。通过上述代码，你已经成功构建了一个简单的任务管理器应用，使用了Ant Design的各种组件和功能。这个案例展示了如何使用Ant Design构建一个功能完整的应用。

小结

通过本节的项目实践案例，你已经了解了如何使用Ant Design构建一个简单的任务管理器应用。这个案例涉及到了Ant Design中的一些核心组件，如表单、列表、模态框等。更多实践案例和详细的组件用法，请参考Ant Design的官方文档。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

梵蒂冈之花

手记
篇

粉丝

30

获赞与收藏

168

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

Pandas 入门教程

25个小节 18626 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

AntDesign使用入门教程

NPM安装

Yarn安装

CDN引入

创建React项目

安装Ant Design

引入Ant Design

基本用法

负责状态

Icon按钮

基本用法

分页

基本用法

配置卡片头和卡片尾

基本用法

配置遮罩层和标题

基本用法

自定义主题

基本用法

复杂定制

基本用法

组件内部样式

基本用法

响应式栅格布局

媒体查询

Flexbox布局

Flex布局组件

创建表单

表单分步

简单验证

自定义验证

依赖验证

使用onFinish回调函数

使用validateFields方法

阅读免费教程

使用`onFinish`回调函数

使用`validateFields`方法