Ant Design在处理业务表单中的一些实践
文章目录
- 前言
- 表单处理实践
- Modal 清空旧数据
- 使用Form.create和getFieldDecorator对Form进行包装
- 表单控件是switch
- 自定义表单控件
- Table列表
- Select
- showSearch 用于在选择框中显示搜索框
- 其他需要注意的组件
- Tabs
- 其它
前言
目前，很多中小企业前端实现采用了react＋antd技术栈。在传统业务中，大部分后台的表单和列表模式类似，通过antd组件快速搭建，可以节约时间成本。本文是实际场景中的一些实践记录，供大家参考。
表单处理实践
Modal 清空旧数据
组件有标准的 React 生命周期，关闭后状态不会自动清空。 如果希望每次打开都是新内容，需要自行手动清空旧的状态。或者打开时给 Modal 设置一个全新的 key， React 会渲染出一个全新的对话框。
第一种清空方式：显示弹窗时设置一个新的key
componentWillReceiveProps(nextprops){//打开时设置一个新keyif(nextprops.visible)this.setState({newKey:!this.state.newKey})}this.state.newKey} visible={this.props.visible} />
第二种清空方式：关闭弹窗后，清空弹窗数据，弹窗内是表单时重置表单。
afterClose = () => {// 隐藏动画完成后重置内容this.props.form.resetFields();}this.afterClose} visible={this.props.visible} />
使用Form.create和getFieldDecorator对Form进行包装
经过包装的Form具备以下特点：
使用 Form.create 处理后的表单具有自动收集数据并校验的功能;
不再需要用 onChange 来做同步，但还是可以继续监听 onChange 等事件;
不能用控件的 value或defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue;
不需要用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值,使用 this.props.form.getFieldsValue来获取表单值。
包装一个表单包括三个步骤：
第一步：
class CustomizedForm extends React.Component {}CustomizedForm = Form.create({})(CustomizedForm);
第二步：使用getFieldDecorator装饰对应的field
const FormItem = Form.Item;
const formItemLayout = {labelCol: { span: 5 },wrapperCol: { span: 12 }
};
第三步：submit时添加校验逻辑和后处理
submit = (e)=> {//这里去掉默认行为，可以避免用户操作回车时提交表单e.preventDefault();//校验表单的值this.props.form.validateFields((err, values) => {if (!err) {//后处理操作}}
}
表单控件是switch
switch开关的值参数名是checked而不是value，使用时有两种方式：
第一种：引入团队封装后的switch控件
tnpm install @ali/uniform-react-components --save
import Switch from ‘@ali/uniform-react-components/lib/Switch/index’;
第二种: 使用valuePropName
自定义表单控件
自定义表单控件的需求场景很多，为了能够支持 antd Form 的 getFieldDecorator 包装，从而使组件能直接用于 Form 中，需要遵守以下规则：
提供受控属性 value 或其它与 valuePropName 的值同名的属性。
提供 onChange 事件或 trigger 的值同名的事件。
不能是函数式组件。
大CMS业务中用到的自定义表单控件有很多，例如UploadImg,TreeSelect,BizTypeSelect等等，具体可以参考youku-manager和youku-scg等工程里面的实践。
Table列表
第一步：定义columns 即列表中列的描述
columns = [{title: 'ID',dataIndex: 'id',key: 'id'}, {title: '内容数量',key: 'amount',//render用于生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据render: (text,record) => ()=>this.relationTagPopup(record)}>查看,},{title: '操作',key: 'action',//删除，下线等post操作使用PopConfirm进行二次确认render: (item) => (() => this.editTag(item)}>编辑()=>this.deleteTag(item)}>删除 )}];
第二步：定义Table
rowKey属性是表格行 key 的取值，这里取的是column中的id字段，保证key值不重复
loading表示页面是否加载中，在翻页和查询时添加load效果，可以优化体验
dataSource 数据数组
this.columns} loading={state.loading} dataSource={state.tagList} pagination={{ pageSize:10, total: state.total, current: state.pageNo, }} onChange={this.handlePagination} rowKey="id" />
第三步：更新dataSource数据源
this.setState({loading:true})
IO.getTagRepertoryList(data).then(response => {if(response.success){const data = response.data;const tagList = data.itemList;const total = data.totalSize;const pageNo = data.pageNo;const loading = false;this.setState({tagList,pageNo,total,loading});}else{Message.warning(response.message)this.setState({tagList:[],total:0,pageNo:1,loading:false});}}).catch(err => {console.error(err);this.setState({loading:false,tagList:[],total:0,pageNo:1,});Message.error('查询异常，无结果');});
Select
cms后台的业务有很多选择选择下拉需求，下面两个业务常见的select为例，解释几个比较重要的配置
多值远程搜索
render() {
//fetching 查询状态，用于在接口数据返回前显示loading效果
const { fetching, personList } = this.state;
// Option的name属性对应的是optionLabelProp设置的值
const options = personList.map((d,index)=> )
return (
)
optionLabelProp和labelInValue配合，默认情况下 onChange 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性，这个人物搜索组件的Option的children是ReactNode，所以我们需要通过optionLabelProp拿到需要的文本，回显在input框中，同时给后端传递所需要的map结构。
filterOption是否根据输入项进行筛选,如果这个select的option是通过用户输入关键字请求接口渲染的，那么需要设置成false，否则可以通过特定函数设定内部筛选规则，具体的使用方法在第二个例子中具体说明。
单值内部搜索
showSearch 用于在选择框中显示搜索框
filterOption 在这里定义内部搜索逻辑，默认是通过option的value进行匹配，这里为了能既能够通过id也能够通过name进行搜索，通过这个函数进行了特殊设置。
使用Fetch进行接口调用
import {fetchGet, fetchPost, fetchJsonp} from '@ali/uniform-react-components/lib/UniFetch/index';
//大cms后台的post请求需要增加token校验
const _tb_token_ = window._tb_token_;
const params = {//fetch 请求默认是不带 cookie 的credentials: 'include',//是否允许跨域//mode: "no-cors",headers: {//服务端通过识别X-Requested-With来判定发送的fetch请求是ajax请求，数据统一封装成Json返回"X-Requested-With":"XMLHttpRequest"},
}
class IO {/** * get 请求例子 */static fetchGetSample(data) {return fetchGet('/video/v5video/item/search.htm?', data,params);}/** * post 请求例子 */static fetchPostSample(data) {data._tb_token_ = _tb_token_;return fetchPost('/video/v5video/item/add.htm', data,params);}/** * jsonp 请求例子 */static fetchJsonpSample(tags) {return fetchJsonp('/common/jsonp/getTagName.htm?', {tags: tags},params);}
}const data = {key1:value1,key2:value2}
IO.fetchPostSample({data})
.then(response=>{})
.catch(err=>{})
其他需要注意的组件
Tabs
注意如果两个tab有数据耦合，需要在切换时有针对性的刷新，比如将标签页面和标签维度放一个tabs中，如果在标签维度中添加了数据，那么切换回标签页面时，标签维度的select选项必须同步，最直接的做法就是刷新页面。
Button htmlType='submit’最常用
InputNumber 利用formatter和parser可以限制InputNumber的输入格式，比如限制用户只能输入一位小数
Spin 模拟loading状态
其它
使用diamond进行前后端分离和环境区分
目前采用diamond进行页面级别的前后端分离，工作流为：
- 后端提供接口和预埋数据，后台发布与前端发布隔离，这里的预埋数据前端可以通过window.paramName的全局方式获取；
- 后端提供日常，预发和线上三个环境的diamond地址，diamond中加入用于前端react渲染；
- 前端git发版本，手动在三个diamond环境内添加css和js资源，更新版本号；
- 由于不同的子后台域名不同，使用其他子后台接口时需要利用diamond区分接口环境，例如在优酷选品后台中要使用cms后台节目搜索接口，
在日常的diamond中设置
window.PROGRAM_SEARCH_URL = ‘//haibao.alibaba.net/youku/api/filter/show.json’;
在预发和线上则改成
window.PROGRAM_SEARCH_URL = ‘//haibao.alibaba.com/youku/api/filter/show.json’;前端通过window.PROGRAM_SEARCH_URL获得真实的接口地址。 - 存在的问题：diamond方案虽然可以使版本升级通过推送提高效率，但会产生前后端无法同时生效、回滚异常等副作用，需要进一步思考。
相关内容
热门资讯
美国不提安卓系统华为,迈向自主...
华为与美国：一场关于技术、市场与政策的较量在当今这个数字化的世界里，智能手机已经成为我们生活中不可或...
安卓系统怎么打开ppt,选择文...
你有没有遇到过这种情况：手里拿着安卓手机，突然需要打开一个PPT文件，却怎么也找不到方法？别急，今天...
谷歌退回到安卓系统,探索创新未...
你知道吗？最近科技圈可是炸开了锅，谷歌竟然宣布要退回到安卓系统！这可不是一个简单的决定，背后肯定有着...
安卓系统待机耗电多少,深度解析...
你有没有发现，手机电量总是不经用？尤其是安卓系统，有时候明明没怎么用，电量就“嗖”的一下子就下去了。...
小米主题安卓原生系统,安卓原生...
亲爱的手机控们，你是否曾为手机界面单调乏味而烦恼？想要给手机换换“衣服”，让它焕然一新？那就得聊聊小...
voyov1安卓系统,探索创新...
你有没有发现，最近你的手机是不是变得越来越流畅了？没错，我要说的就是那个让手机焕发青春的Vivo V...
电脑刷安卓tv系统,轻松打造智...
你有没有想过，家里的安卓电视突然变得卡顿，反应迟钝，是不是时候给它来个“大保健”了？没错，今天就要来...
安卓系统即将要收费,未来手机应...
你知道吗？最近有个大消息在科技圈里炸开了锅，那就是安卓系统可能要开始收费了！这可不是开玩笑的，这可是...
雷凌车载安卓系统,智能出行新体...
你有没有发现，现在的汽车越来越智能了？这不，我最近就体验了一把雷凌车载安卓系统的魅力。它就像一个聪明...
怎样拍照好看安卓系统,轻松拍出...
拍照好看，安卓系统也能轻松搞定！在这个看脸的时代，拍照已经成为每个人生活中不可或缺的一部分。无论是记...
安卓车机系统音频,安卓车机系统...
你有没有发现，现在越来越多的汽车都开始搭载智能车机系统了？这不，咱们就来聊聊安卓车机系统在音频方面的...
老苹果手机安卓系统,兼容与创新...
你手里那台老苹果手机，是不是已经陪你走过了不少风风雨雨？现在，它竟然还能装上安卓系统？这可不是天方夜...
安卓系统7.dns,优化网络连...
你有没有发现，你的安卓手机最近是不是有点儿“慢吞吞”的？别急，别急，让我来给你揭秘这可能与你的安卓系...
安卓手机系统怎么加速,安卓手机...
你有没有发现，你的安卓手机最近变得有点“慢吞吞”的？别急，别急，今天就来给你支几招，让你的安卓手机瞬...
小米note安卓7系统,探索性...
你有没有发现，手机更新换代的速度简直就像坐上了火箭呢？这不，小米Note这款手机，自从升级到了安卓7...
安卓和鸿蒙系统游戏,两大系统游...
你有没有发现，最近手机游戏界可是热闹非凡呢！安卓和鸿蒙系统两大巨头在游戏领域展开了一场激烈的较量。今...
安卓手机没有系统更,揭秘潜在风...
你有没有发现，现在安卓手机的品牌和型号真是五花八门，让人挑花了眼。不过，你知道吗？尽管市面上安卓手机...
充值宝带安卓系统,安卓系统下的...
你有没有发现，最近手机上的一款充值宝APP，在安卓系统上可是火得一塌糊涂呢！这不，今天就来给你好好扒...
安卓系统8.0镜像下载,轻松打...
你有没有想过，想要给你的安卓手机升级到最新的系统，却不知道从哪里下载那个神秘的安卓系统8.0镜像呢？...
安卓系统修改大全,全方位修改大...
你有没有想过，你的安卓手机其实是个大宝藏，里面藏着无数可以让你手机焕然一新的秘密？没错，今天就要来个...