#说明
antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。也是是本人目前实习公司所用框架技术之一本笔记主要记录工作中项目中遇到的
与官方文档有差异化的的使用方式、或者是自己对于文档记录的组件的使用,方便自己查阅除此笔记外大家可以看我其他笔记 :全栈笔记、数据结构与算法、编程_前端开发学习笔记、编程_后台服务端学习笔记 、Java 、Nodejs 、JavaScript笔记、编程工具使用笔记 、ES6及后续版本学习笔记 、Vue笔记整合 、React笔记、微信小程序学习笔记、Chrome开发使用及学习笔记 以及许多其他笔记就不一一例举了
#目录
Ant Design of React 文档
一、数据录入
1、From表单
许多数据录入是与From表单相结合的
Ⅰ- 限制表单中输入框不能为空以及中文
通过
From.Item中的normalize属性进行处理对value的处理:组件获取值后进行转换，再放入 Form 中。不支持异步通过正则替换,将键入的空格以及中文替换为空字符串
代码示例
<Form form={form} onFinish={handleFinish}><Itemlabel="密码"name="password"rules={[{ required: true, message: '密码不能为空' }]}//密码框不允许为空格,且不允许输入中文normalize={(value) => value.replace(/\s/g, '').replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi, '')}<Input.Passwordplaceholder="请输入密码"autoComplete="new-password"/></Item></From>
Ⅱ - 自定义校验
详见
Rule属性中自定义validator通常用作用户名等校验
<Form form={form} onFinish={handleFinish}><Itemlabel="用户名"name="username"validateTrigger="onBlur"normalize={(value) => value.replace(/\s/g, '')}rules={[//此处message为空字符串是为了防止下方自定义校验返回的字符串重叠{ required: true, message: '' },{validator: async (_, value) => {//如果是修改时,可以用这句话,当你内容没改变时,不进行校验if (editData.name === value) return;//判断空以及输入空字符串的报错if (value == null || value.trim() == '') return Promise.reject("用户名不能为空");//请求接口,查询通过上述两个校验后的字符串是否与数据库中重复,如果重复,则提示用户名已存在const res: IResult<IExist> = await ChannelApi.isUserExist( value );if (res?.data.status) return Promise.reject('用户名已存在');else return Promise.resolve();},},]}<Input placeholder="请输入用户名" /></Item></From>
- 通常用作必须字段校验(不进行数据库查询)
<Itemlabel="必填项"name="incomeType"rules={[{ required: true, message: '' },{validator: async (_, value) => {if (value == null || value.trim() == '')return Promise.reject('必填项不能为空');},},]}<Input.TextArea placeholder="请输入必填项信息" /></Item>
Ⅲ - 表单中动态修改数字输入框的value
出现场景:在 第一次对
InputNumber组件输入0时，就自动填充为设置的min了，这时我的需求是改成输入框失去焦点时再自动填充为min用到的组件:
From、InputNumber代码示例
```jsx //最小折扣,用于动态改变最小折扣 const [min, setMin] = useState(0);
若有收获，就点个赞吧
0 人点赞
