antd基本使用

# 1. antd基本使用

# 1-1. 创建ts版本的react项目

create-react-app 项目名 --template typescript

# 1-2. 进入项目目录启动项目

cd 项目名
npm start

1
2

# 1-3. 安装antd

npm install antd --save

# 1-4. 使用antd的Button组件

App.tsx

import React from 'react'
import { Button } from 'antd'
export default function App() {
    return (
        <div>
            <Button type='primary'>按钮</Button>
        </div>
    )
}

1
2
3
4
5
6
7
8
9

# 2. antd官方文档使用方式

点击 “组件” 选项卡

找到想要使用的组件

点击显示源代码，复制粘贴到自己的项目

高级功能查看 api

# 3. Table组件使用

rowKey：指定key值

columns : 配置列信息

title：列头信息

dataIndex: 该列渲染数据源中的哪个字段

render: 自定义渲染内容

render(value, row, index)

value: 如果有dataIndex, 是dataIndex指定的字段值

如果没有dataIndex, 就是row，当前行对象

row：遍历的当前行对象

index：索引

dataSource：渲染的列表数据源

# 3-1. table基本使用

import React from 'react'
import { Table, Button } from 'antd'
import type { ColumnsType } from 'antd/es/table';
export default function TableTest() {
    const columns: ColumnsType<IUserItem> = [
        {
            title: '姓名', // title 属性是表头信息
            dataIndex: 'name', // 渲染dataSource数据源中的哪个字段[属性]
        },
        {
            title: '年龄',
            dataIndex: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
        },
        {
            title: '操作',
            /**
             * 
             * @param value  当前行对象
             *        当有dataIndex属性的时候， value就是dataIndex指定的字段值
             *        没有dataIndex属性的时候， value就是   当前行对象
             * @param row   当前行对象
             * @param index 索引
             * @returns 
             */
            dataIndex: 'name',
            render(value: string, row: IUserItem, index: number) { // 自定义该列显示的内容
                console.log('value: ', value);
                console.log('row: ', row);
                console.log('index: ', index);
                return (
                    <>
                        <Button type='primary' danger onClick={()=>{
                            // delete(row.id)
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    /**
     * 定义dataSource数据源的类型
     */
    interface IUserItem {
        id: number;
        name: string;
        age: number;
        address: string;
    }
    type IUserList = IUserItem[]
    // data 数据  source 资源  数据资源，要渲染的表格数据
    const dataSource:IUserList = [
        {
            id: 1,
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            id: 2,
            name: '吴彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        }
    ];

    return (
        <div>
            <h3>Table组件</h3>
            <Table
                rowKey='id'  // 指定不重复的key值
                columns={columns}
                dataSource={dataSource}
            />
        </div>
    )
}

# 3-2. table组件静态分页实现

给table组件添加pagination 属性，进行分页配置

current: 当前页

pageSize:每页显示几条

total: 总条数

showQuickJumper：快速跳转

showSizeChanger: 显示每页显示几条下拉框

pageSizeOptions: 每页显示几条下拉框选项

showTotal：总条数自定义显示

import React from 'react'
import { Table, Button } from 'antd'
import type { ColumnsType } from 'antd/es/table';
export default function TableTest() {
    const columns: ColumnsType<IUserItem> = [
        {
            title: '姓名', // title 属性是表头信息
            dataIndex: 'name', // 渲染dataSource数据源中的哪个字段[属性]
        },
        {
            title: '年龄',
            dataIndex: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
        },
        {
            title: '操作',
            /**
             * 
             * @param value  当前行对象
             *        当有dataIndex属性的时候， value就是dataIndex指定的字段值
             *        没有dataIndex属性的时候， value就是   当前行对象
             * @param row   当前行对象
             * @param index 索引
             * @returns 
             */
            dataIndex: 'name',
            render(value: string, row: IUserItem, index: number) { // 自定义该列显示的内容
                console.log('value: ', value);
                console.log('row: ', row);
                console.log('index: ', index);
                return (
                    <>
                        <Button type='primary' danger onClick={() => {
                            // delete(row.id)
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    /**
     * 定义dataSource数据源的类型
     */
    interface IUserItem {
        id: number;
        name: string;
        age: number;
        address: string;
    }
    type IUserList = IUserItem[]
    // data 数据  source 资源  数据资源，要渲染的表格数据
    const dataSource: IUserList = [
        {
            id: 1,
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            id: 2,
            name: '吴彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        }
    ];

    return (
        <div>
            <h3>Table组件</h3>
            <Table
                rowKey='id'  // 指定不重复的key值
                columns={columns}
                dataSource={dataSource}
                // pagination={false}  // 不显示分页器
                pagination={{
                    current:2, // 当前页
                    pageSize:10, // 每页显示几条 
                    total:100,// 总条数
                    showQuickJumper:true, // 快速跳转
                    showSizeChanger:true, // 每页显示几条下拉框
                    pageSizeOptions:[10,15,20,30,100], // 下拉框选项
                    showTotal:(total:number)=>{ // 总条数自定义显示
                        return (
                            <div>
                                总体条数是: <span style={{color:'red'}}>{total}</span>
                            </div>
                        )
                    }
                }}
            />
            
        </div>
    )
}

# 3-3. table分页动态实现

定义分页状态数据

let [current, setCurrent] = useState<number>(1);// 当前页
let [pageSize, setPageSize] = useState<number>(2); // 每页几条
let [total, setTotal] = useState<number>(5); // 总条数

1
2
3

添加onChange 事件回调

import React, { useState } from 'react'
import { Table, Button } from 'antd'
import type { ColumnsType } from 'antd/es/table';
export default function PageTest() {
    const columns: ColumnsType<IUserItem> = [
        {
            title: '姓名', // title 属性是表头信息
            dataIndex: 'name', // 渲染dataSource数据源中的哪个字段[属性]
        },
        {
            title: '年龄',
            dataIndex: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
        },
        {
            title: '操作',
            /**
             * 
             * @param value  当前行对象
             *        当有dataIndex属性的时候， value就是dataIndex指定的字段值
             *        没有dataIndex属性的时候， value就是   当前行对象
             * @param row   当前行对象
             * @param index 索引
             * @returns 
             */
            dataIndex: 'name',
            render(value: string, row: IUserItem, index: number) { // 自定义该列显示的内容
                console.log('value: ', value);
                console.log('row: ', row);
                console.log('index: ', index);
                return (
                    <>
                        <Button type='primary' danger onClick={() => {
                            // delete(row.id)
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    /**
     * 定义dataSource数据源的类型
     */
    interface IUserItem {
        id: number;
        name: string;
        age: number;
        address: string;
    }
    type IUserList = IUserItem[]
    // data 数据  source 资源  数据资源，要渲染的表格数据
    const dataSource: IUserList = [
        {
            id: 1,
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            id: 2,
            name: '吴彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            id: 3,
            name: '迪丽热巴',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            id: 4,
            name: '古力娜扎',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            id: 5,
            name: '佟丽娅',
            age: 42,
            address: '西湖区湖底公园1号',
        }
    ];
    // 设置分页相关状态
    let [current, setCurrent] = useState<number>(1);// 当前页
    let [pageSize, setPageSize] = useState<number>(2); // 每页几条
    let [total, setTotal] = useState<number>(5); // 总条数
    return (
        <div>
            <h3>pagination 配置</h3>
            <Table
                rowKey='id'  // 指定不重复的key值
                columns={columns}
                dataSource={dataSource}
                // pagination={false}  // 不显示分页器
                pagination={{
                    current, // 当前页
                    pageSize, // 每页显示几条 
                    total,// 总条数
                    showQuickJumper:true, // 快速跳转
                    showSizeChanger:true, // 每页显示几条下拉框
                    pageSizeOptions:[2,3,5,10], // 下拉框选项
                    showTotal:(total:number)=>{ // 总条数自定义显示
                        return (
                            <div>
                                总体条数是: <span style={{color:'red'}}>{total}</span>
                            </div>
                        )
                    },
                    /**
                     * @param page 变化后的当前页
                     * @param pageSize 变化后的每页几条
                     */
                    onChange:(page:number, pageSize:number)=>{
                        // console.log('page:' , page);
                        // console.log('pageSize: ', pageSize);
                        setCurrent(page);
                        setPageSize(pageSize);
                    }
                }}
            />
            
        </div>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

# 4. axios 在ts项目中使用

安装： npm i axios
二次封装:
src/http/index.ts
1
发送请求api函数
src/api/github.ts
1
注意：ts是在编译阶段进行语法检查，是代码执行之前会进行的检查，但发送ajax回来的数据结构是在代码执行之后，所以想要使用请求回来的数据，需要提前定义好数据类型，通过泛型参数，告诉给ts，否则，会报错

# 4-1. 没有定义数据类型时的ts报错演示

src/http/index.ts 对axios 进行二次封装

import axios from 'axios';

// 1. 基础配置
const request = axios.create({
    baseURL:'https://api.github.com',
    timeout:20000
})

// 2. 配置拦截器

// 请求拦截器
request.interceptors.request.use(config=>{

    return config;
})

// 响应拦截器
request.interceptors.response.use(response=>{

    return response.data;
})
export default request;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

src/api/github.ts 封装请求的api函数

import request from "../http"
export const getUsers = (keyword:string)=>{
    return request.get('/search/users', {
        params:{
            q:keyword
        }
    })
}

1
2
3
4
5
6
7
8

src/components/AxiosTest.tsx

import React, { useEffect, useState } from 'react'
import { getUsers } from '../api/github';

export default function AxiosTest() {
    let [users, setUsers] = useState([])

    useEffect(()=>{
        async function main(){
            let res = await getUsers('aa')
            console.log('res: ', res);
            //console.log('user: ', res.items);// ts 报错，res身上没有 items属性
            // ts 是在编译阶段执行代码检查，数据是执行之后才有数据结构，需要让ts直到未来请求回来的数据结构，也就是需要先定义出响应数据的类型告诉ts
        }
        main();
    }, [])
    return (
        <div>
            <h3>Axios 测试</h3>
        </div>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 4-2. 定义响应数据类型，发送请求时通过泛型传递

api请求函数需要传递泛型，比如
request.get<any, 响应体类型>
request.post<any,响应体类型>
request.delete<any,响应体类型>
    .....
1
2
3
4
也就是说，在ts中发送ajax请求，都需要传递泛型参数，那么就需要根据接口返回值，先去定义响应体的类型。一般类型写在 src/api/model 目录中

因此，在ts中发送请求的步骤如下：

查看接口：请求方式、url、参数、响应数据[后面定义类型的依据]

封装api函数：
定义类型：请求参数类型、响应数据类型

定义函数：请求方法中通过泛型传递参数

调用api函数
生命周期钩子中调用

事件回调中调用

渲染页面：
定义状态：状态数据要传递类型，通过泛型传递

重置状态，进行渲染

src/api/model/githubTypes.ts 定义api请求函数类型

/**
 * 定义 github.ts 中定义的请求api函数，需要的类型
 */

/**
 * 用户对象类型
 */
export interface IUserItem {
    id:number;
    login:string;
    avatar_url:string;
    html_url:string;
}
/**
 * 用户列表数组类型
 */
export type IUserList = IUserItem[]
/**
 * 获取用户列表响应结果类型
 */
export interface IUsersResponse {
    items: IUserList
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

src/api/github.ts 封装api函数，并传递类型

import request from "../http"
import { IUsersResponse } from "./model/githubTypes"
export const getUsers = (keyword:string)=>{
    return request.get<any, IUsersResponse>('/search/users', {
        params:{
            q:keyword
        }
    })
}

1
2
3
4
5
6
7
8
9

src/components/AxiosTest.tsx

调用api函数

定义状态【传递类型】

import React, { useEffect, useState } from 'react'
import { getUsers } from '../api/github';
import { IUserList } from '../api/model/githubTypes';

export default function AxiosTest() {
    let [users, setUsers] = useState<IUserList>([])

    useEffect(()=>{
        async function main(){
            let res = await getUsers('aa')
            console.log('res: ', res);
            console.log('user: ', res.items);// ts 报错，res身上没有 items属性
            // ts 是在编译阶段执行代码检查，数据是执行之后才有数据结构，需要让ts直到未来请求回来的数据结构，也就是需要先定义出响应数据的类型告诉ts
            setUsers(res.items);
        }
        main();
    }, [])
    return (
        <div>
            <h3>Axios 测试</h3>
        </div>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 4-3. axios结合table实现分页

查看接口

定义api函数【类型、函数封装】

调用api函数【生命周期钩子调用】

渲染数据：定义状态完成渲染

注意：api类型、函数的封装详见 4-2. 此处只演示组件中调用 api函数渲染数据的部分

src/components/AxiosTable.tsx

import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react'
import { getUsers } from '../api/github';
import { IUserItem, IUserList } from '../api/model/githubTypes';

export default function AxiosTable() {
    // 定义状态数据
    let [users, setUsers] = useState<IUserList>([])

    let [current, setCurrent] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(3)
    let [total, setTotal] = useState<number>(10)
    useEffect(() => {
        
        // 调用api函数
        async function main() {
            let res = await getUsers('aa')
            console.log('res: ', res);
            console.log('user: ', res.items);// ts 报错，res身上没有 items属性
            // ts 是在编译阶段执行代码检查，数据是执行之后才有数据结构，需要让ts直到未来请求回来的数据结构，也就是需要先定义出响应数据的类型告诉ts
            setUsers(res.items);
            // 设置总条数
            setTotal(res.items.length);
        }
        main();
    }, [])
    // 定义列配置
    const columns: ColumnsType<IUserItem> = [
        {
            title: 'id',
            dataIndex:'id'
        },
        {
            title:'login',
            dataIndex:'login'
        },
        {
            title:'头像',
            render(row:IUserItem){
                return <a href={row.html_url}><img width={100} src={row.avatar_url}/></a>
            }
        }
    ]
    
    return (
        <div>
            <h3>axios请求数据渲染table练习</h3>
            <Table
                rowKey={'id'}
                columns={columns}
                dataSource={users}
                pagination={{
                    current,
                    pageSize,
                    total,
                    onChange:(page:number, pageSize:number)=>{
                        setCurrent(page)
                        setPageSize(pageSize)
                    }
                }}
            />
        </div>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 5. Form表单

通过form对象操作表单

使用 form对象操作表单的好处，可以更方便的操作表单数据获取表单数据的第二种方式：

创建一个form对象

给Form表单组件绑定 form对象

通过form的api对表单数据进行操作

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

export default function FormData() {
    /**
     * 使用 form对象操作表单的好处，可以更方便的操作表单数据
     * 获取表单数据的第二种方式：
     * 1. 创建一个form对象
     * 2. 给Form表单组件绑定 form对象
     * 3. 通过form的api对表单数据进行操作 
     */

    const [form] = Form.useForm(); // 1. 创建form对象

    const onFinish = (values: any) => {
        // values 当点击 submit提交按钮的时候触发，并将表单数据收集到values中
        console.log('Success:', values);
        // getFieldsValue 获取表单的数据
        console.log('form data: ', form.getFieldsValue());
    };

    const reset = ()=>{
        console.log('reset');
        // form.resetFields(); // 恢复初始值

        form.setFieldsValue({ // 可以指定表单值的字段，进行批量设置
            username:'atguigu',
            password:'123123',
            phone:13141801331
        })
    }

    

    return (
        <>
            <h3>Form表单组件 数据处理</h3>
            <Form
                name="basic"
                labelCol={{ span: 8 }} // 文字宽度
                wrapperCol={{ span: 16 }} // 表单宽度
                initialValues={{ remember: false, username:'asdklfj'}}
                onFinish={onFinish}
                // 绑定form对象到表单组件
                form={form}
            >
                <Form.Item
                    label="Username123123"
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="phone"
                    name="phone"
                    rules={[
                        { required: true, message: '手机号必填' },
                        { pattern:/^1[3-9]\d{9}$/, message:'手机号不合法'}
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                    <Button onClick={reset}>清空</Button>
                </Form.Item>
            </Form>
        </>
    )
}

编辑

← typescript笔记 react项目笔记→