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;
    }
}
相关推荐
南屿im1 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端1 分钟前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军1 分钟前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心3 分钟前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝6 分钟前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
受之以蒙6 分钟前
Rust & WASM 之 wasm-bindgen 基础:让 Rust 与 JavaScript 无缝对话
前端·笔记·rust
中微子7 分钟前
React Props 传值规范详解
前端·react.js
namehu7 分钟前
Taro 小程序 Video 组件 referrer-policy="origin" 属性失效排查记
前端·taro
卸任12 分钟前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
WildBlue20 分钟前
阮一峰闭包:JavaScript最优雅的"背包"魔法!✨
前端·javascript