ant design pro v5 之 ProForm自定义表单项

需求背景：ProForm 默认提供的表单项无法满足项目开发

解决方案：ProForm本身是在原来的Ant Design Form 的基础上增加一些语法糖和布局设置等等，那我们就看看ProForm是如何做的就知道了

了解之后得知：ProForm的表单代码是通过如下方式来创建的：

const ProFormText = (props) => {return (<ProForm.Item {...props}><Input placeholder={props.placeholder} {...props.fieldProps} /></ProForm.Item>);
};

上面代码一目了然是吧，知道如何创建的就很简单了，我们来照葫芦画瓢就行了，下面是我的代码：

import React, {useRef, useState} from 'react';
import ProForm from '@ant-design/pro-form';
import { Select,Form } from 'antd';const { Option } = Select;const children = [];
for (let i = 10; i < 36; i++) {children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
export default () => (<><ProForm.Item label="应用类型1" shouldUpdate>{(form) => {return (<ProForm.Item name="switch"><Selectmode="multiple"allowClearstyle={{ width: '100%' }}placeholder="Please select">{children}</Select></ProForm.Item>);}}</ProForm.Item></>
);

这是页面预览效果：

ok，下面来解释一下注意事项：

1： ProForm.Item也可以替换成ant 的 Form.Item，因为上面说了，ProFrom的底层就是ant的From

2：最外层的ProForm.Item 一定要加上 shouldUpdate，这个属性是用来控制自定义表单更新的，如果不加，你的表单在初始化的时候是渲染不出来的，并且页面会报警告

Warning: [antd: Form.Item] `children` of render props only work with `shouldUpdate` or `dependencies`.

3： name 要挂到里面的ProForm.Item或者Form.Item 标签身上，如果不加页面也会报警告：

Warning: [antd: Form.Item] Do not use `name` with `children` of render props since it's not a field.

4: 关于fieldProps

每个表单项都支持 fieldProps 属性来支持设置输入组件的props,说白了fieldProps 就是设置给底层antd组件的属性，

所以我们给 ProFormText 设置的 props 其实是 Form.Item 的，fieldProps 才是包含的组件的，要切记

看最上面的示例代码即可明白

具体解释看这里，官方api有提到过：表单 Form - Ant Design

如果有其他问题，也可以留言或者私信我

以上就是这次的分享，如果有帮到你，劳驾点个赞吧~

ant design pro v5 之 ProForm自定义表单项相关推荐

Ant Design Pro V5 入门指南
一.安装及完整区块.运行.打包命令 API: V5版:https://beta-pro.ant.design/index-cn ProTable:https://protable.ant.design ...
ant design pro v5去掉水印
ant design pro v5去掉水印 ant design pro v5去掉水印 ant design pro v5去掉水印配置水印,水印是 PageContainer 的功能,layout ...
Ant Design Pro V5删除自带的国际化
Ant Design Pro V5删除自带的国际化最近做了一个基于Ant Design pro v5 + umi3的集团晋升系统,运行项目的时候,路由那边自定义name的时候会触发框架自带的国际化, ...
Umi v3 Ant Design Pro v5 从零开始实战视频教程（34 个视频）
Umi v3 & Ant Design Pro v5 从零开始实战视频教程(34 个视频) Umi v3 & Ant Design Pro v5 视频教程,从零开始学习,搭建一个完整的 ...
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
ant design pro v5 总结
Ant Design Pro v5 使用心得相比V4,V5到底强在哪? 如何更改 title图标和加载时的页面? defaultSettings中菜单的几种模式及主题等配置国际化 request ...
Ant Design Pro v5 正式版从零开始实战 Refresh Token 视频教程（13 个视频）
Ant Design Pro v5 正式版从零开始实战 Refresh Token 视频教程(13 个视频) Ant Design Pro v5 正式版出来了,跟之前的版本在代码上有些细微的差异,这套 ...
Ant Design Pro V5精讲（实践篇一）：自定义登录界面、主界面
用户需求登录界面改造成自己的主界面的logo及产品名称改造成自己的语言包去掉或者只留中英语言包登录界面改造进入pages/user/login目录找到index.tsx // 去掉语言包栏目 ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
Ant Design Pro V5 初体验（typescript版）
官网网站开箱即用的中台前端/设计解决方案https://pro.ant.design/zh-CNGitHub网站 GitHub - ant-design/ant-design-pro:

ant design pro v5 之 ProForm自定义表单项

以上就是这次的分享，如果有帮到你，劳驾点个赞吧~

ant design pro v5 之 ProForm自定义表单项相关推荐

最新文章

热门文章