为了账号安全,请及时绑定邮箱和手机立即绑定

AntDesign使用入门教程

概述

本文详细介绍了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.jsApp.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;

配置卡片头和卡片尾

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

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 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消