react18加antd新手上路使用_从0到1搭建你的react18项目

第一次使用react和antd组件库，记录过程中实用的几个组件和使用方法；

项目中依赖版本

"react": "^18.2.0",
"antd": "^5.3.0",
1
2

Input关闭历史填充

 <Input placeholder="请输入ID/名称" allowClear autoComplete="off"/>  
1

Popover组件使用

<Popover></Popover>
// 挂载到当前节点父节点
<Popover 
    getPopupContainer={(triggerNode: any) => triggerNode.parentNode}>
</Popover>
1
2
3
4
5

切换中文加日期插件汉化

import { ConfigProvider } from 'antd';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
import 'moment/dist/locale/zh-cn';
import Router from '@/router/index';
function App() {
  return (
    <div className="App">
      <ConfigProvider theme={{ token: { colorPrimary: '#0078D7'} }} locale={zhCN}>
        <Router></Router>
      </ConfigProvider>
    </div>
  )
}
export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

InputNumber只能输入整数

<InputNumber min={0} max={100} precision={0} placeholder='请输入' style={{width: '100%'}}/>
1

From.List 赋值

// 自定义校验
const checkImei = (_: any, value: string) => {
    if (!value) {
        return Promise.reject(new Error('1-20个字符,仅支持数字或字母!'));
    }
    const is = Reg.EN_NUM.test(value);
    if (is) {
        if (value.length > 12) {
            return Promise.reject(new Error('1-20个字符,仅支持数字或字母!'));
        } else {
            return Promise.resolve();
        }
    } else {
        return Promise.reject(new Error('1-20个字符,仅支持数字或字母!'));
    }
}
const checkImei = (_: any, value: string) => {
        if (!value) {
            return Promise.reject(new Error('1-20个字符,仅支持数字或字母!'));
        }
        const is = Reg.EN_NUM.test(value);
        if (is) {
            if (value.length > 12) {
                return Promise.reject(new Error('1-20个字符,仅支持数字或字母!'));
            } else {
                return Promise.resolve();
            }
        } else {
            return Promise.reject(new Error('1-20个字符,仅支持数字或字母!'));
        }
    }
<Form initialValues={{
    IMEIS: [{imei: 1}, {imei: 2}, {imei: 3}]
}}>
    <Form.List name="IMEIS">
        {(fields, { add, remove }) => (
        <>
            {fields.map(({ key, name, ...restField }, index) => (
                <div key={key}>
                    <Form.Item label={`IMEI${index + 1}`} {...restField} name={[name, 'imei']} 
                        rules={[{ required: true, validator: checkImei }]}>
                        <Input placeholder="请输入" allowClear/>
                    </Form.Item>
                </div>
            ))}
        </>
    )}
    </Form.List>
</Form>
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

表格预制高度

<div className={style.table_wrap}>
    <Table columns={columns} 
        dataSource={data} 
        rowKey={record => record.id} 
        scroll={{ x: 50, y: '360px'  }} 
        pagination={false}>
    </Table>
</div>
:global{
    .ant-table-body{
        height: 360px;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13