当前位置：首页 > news >正文

react18加antd新手上路使用

news 来源：原创 2024/5/10 6:18:24

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

项目中依赖版本

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

Input关闭历史填充

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

Popover组件使用

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

切换中文加日期插件汉化

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只能输入整数

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

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>

表格预制高度

<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;}
}