react18加antd新手上路使用

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

项目中依赖版本
typescript 复制代码
"react": "^18.2.0",
"antd": "^5.3.0",
Input关闭历史填充
typescript 复制代码
 <Input placeholder="请输入ID/名称" allowClear autoComplete="off"/>  
Popover组件使用
typescript 复制代码
<Popover></Popover>
// 挂载到当前节点父节点
<Popover 
    getPopupContainer={(triggerNode: any) => triggerNode.parentNode}>
</Popover>
切换中文加日期插件汉化
typescript 复制代码
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
InputNumber只能输入整数
typescript 复制代码
<InputNumber min={0} max={100} precision={0} placeholder='请输入' style={{width: '100%'}}/>
From.List 赋值
typescript 复制代码
// 自定义校验
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>
表格预制高度
typescript 复制代码
<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;
    }
}
相关推荐
gzzeason25 分钟前
在HTML中CSS三种使用方式
前端·css·html
hnlucky38 分钟前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin40 分钟前
前端八股-promise
前端·javascript
星语卿1 小时前
浏览器重绘与重排
前端·浏览器
小小小小宇1 小时前
前端实现合并两个已排序链表
前端
yngsqq2 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk2 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan2 小时前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE2 小时前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年2 小时前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net