基于ant design form的二次封装
// standardForm.js
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Row, Col, Button } from 'antd'; const FormItem = Form.Item;
// 默认的layout
export const defaultLabelColSpan = 8;
const defaultFormItemLayout = {
labelCol: { span: defaultLabelColSpan },
wrapperCol: { span: 16 },
}; const responsive = {
1: { xs: 24 },
2: { xs: 24, sm: 12 },
3: { xs: 24, sm: 12, md: 8 },
4: { xs: 24, sm: 12, md: 6 },
}; // 监听表单变化
const handleFormChange = (props, changedValues, allValues) => {
if (props.onChange) {
props.onChange(allValues);
}
};
class StandardForm extends PureComponent {
// 渲染单个表单项
renderFormItem = ({ item, layout, form, columns }) => {
const { label, key, required, component, options = {}, rules, extra } = item;
const col = columns > 4 ? 4 : columns;
return (
<Col {...responsive[col]} key={key}>
<FormItem key={key} label={label} {...layout} extra={extra}>
{form.getFieldDecorator(key, {
normalize: val => (typeof val === 'string' ? val.trim() : val),
...options,
form, // 处理复杂的表单校验
rules: rules || [{ required, message: `${label}不能为空` }],
})(component || <Input />)}
</FormItem>
</Col>
);
}; onSubmit = e => {
e.preventDefault();
const { onSubmit } = this.props;
if (onSubmit) {
onSubmit();
}
}; render() {
// items格式即为上文配置的表单项
const { onSubmit, items, layout, columns, form } = this.props;
return (
<Form onSubmit={onSubmit && this.onSubmit}>
<Row gutter={{ md: 8, lg: 24, xl: 48 }} type="flex" align="top">
{items.map(item => this.renderFormItem({ item, layout, form, columns }))}
</Row>
<Button type="primary" htmlType="submit" style={{ display: 'none' }}>
搜索
</Button>
</Form>
);
}
} // colums [1,2,3,4]
StandardForm.propTypes = {
items: PropTypes.array.isRequired,
layout: PropTypes.object,
columns: PropTypes.number,
form: PropTypes.object.isRequired,
}; StandardForm.defaultProps = {
layout: defaultFormItemLayout,
columns: 1,
}; export default Form.create({ onValuesChange: handleFormChange })(StandardForm);
<StandardForm
ref={formRef => {
this.formRef = formRef;
}}
items={formConfig}
layout={{
labelCol: { span: 7 },
wrapperCol: { span: 17 },
}}
columns={3}
/>
基于ant design form的二次封装的更多相关文章
- 基于Ant Design Vue封装一个表单控件
开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...
- 封装一个漂亮的ant design form标签组件
在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...
- ant design pro(二)布局
一.概述 参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框 ...
- 基于Ant Design UI框架的React项目
概述 这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目 详细 代码下载:http://www.demodashi.com/demo ...
- android基于开源网络框架asychhttpclient,二次封装为通用网络请求组件
网络请求是全部App都不可缺少的功能,假设每次开发都重写一次网络请求或者将曾经的代码拷贝到新的App中,不是非常合理,出于此目的,我希望将整个网络请求框架独立出来,与业务逻辑分隔开,这样就能够避免每次 ...
- react 编写 基于ant.design 页面的参考笔记
前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...
- 基于bootstrap table配置的二次封装
准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...
- axios基于常见业务场景的二次封装
axios axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.在前端框架中的应用也是特别广泛,不管是vue还是react,都有很多项目用axios作为网络 ...
- Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)
在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...
随机推荐
- Linux 性能工具集
系统级别: 下面这些工具利用内核的计数器在系统软硬件的环境中检查系统级别的活动. vmstat: 虚拟内存和物理内存的统计,系统级别. mpstat: 每个CPU 的 使用情况. iostat: 每个 ...
- mybatis 基础详解
转 https://www.cnblogs.com/Mr-Kenson/p/8124680.html mybatis 是一个开源的 用于对数据库操作的框架, 读者基本都大体了解其基本功能, 我就不多解 ...
- Linux下安装Redis及搭建主从
Linux下安装Redis 首先在官网下载对应版本的redis包,这里本人使用的是redis-4.0.8.tar.gz. 然后在服务器中存放redis包的路径下执行tar –vxf redis-4 ...
- ubuntu下7z文件的解压方法(转载)
转自:http://qtlinux.blog.51cto.com/3052744/569406 打开终端,键入以下命令: apt-get install p7zip-full 控制台会打出以下信息: ...
- 工作日记:C#获取操作系统、MAC地址、登录用户、网卡、物理内存信息
/// <summary> /// 操作系统的登录用户名 /// </summary> /// <returns>系统的登录用户名</returns> ...
- Codeforces785D - Anton and School - 2
传送门 题意 给出一个只包含'(',')'的字符序列,询问有多少个\(RSBS\) 分析 首先需要知道一个公式 \[\sum_{i=0}^{min(x,y)}C_x^i*C_y^i=C_{x+y}^x ...
- sublim text3快速生成html代码时,tab键失效问题
sublime text3是一款非常强大的文本编辑器,个人觉得做前端的话这款工具很好用.便携,秒启.唯一让我觉得不是特别爽的就是插件啊,都需要自己安装.不过瑕不掩瑜,这款编辑器是很适合开发前端和PHP ...
- PostgreSQL 9.6.2版本在centOS下的安装和配置
1.如果有用yum安装过旧版,卸载掉: yum remove postgresql* 2.更新一下yum: sudo yum update 3.去 官网 找到 适合你系统 的资源的下载地址,然后使用w ...
- Linux基本命令—mkfs/mount/umount/wget/yes/make/passwd
mkfs:用来在特定的分区建立Linux文件系统,是make filesystem的缩写. 例子:mkfs .ext3 /dev/mmcblk0p1 //把该设备格式化成ext3文件系统 m ...
- 《Windows核心编程系列》十三谈谈在应用程序中使用虚拟内存
在应用程序中使用虚拟内存 Windows提供了以下三种机制对内存进行操控: 一:虚拟内存.最适合来管理大型对象数据或大型结构数组. 二:内存映射文件.最适合用来管理大型数据流,以及在同一机 器上运行的 ...