And Design:拓荒笔记——Form表单
And Design:拓荒笔记——Form表单
Form.create(options)
Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件。
经 Form.create()
包装过的组件会自带 this.props.form
属性,这个属性提供了很多API来实现对表单的操作:
代码如下:
class CustomizedForm extends React.Component {}CustomizedForm = Form.create({})(CustomizedForm);
获取Form引用
经过 Form.create
之后如果要拿到表单的引用,可以使用 wrappedComponentRef。
class CustomizedForm extends React.Component { ... }// use wrappedComponentRef
const EnhancedForm = Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm
this.props.form.getFieldDecorator(id, options)
this.props.form.getFieldDecorator()可以对控件进行改造升级,会返回一个新的控件。他有如下的可选参数:
经过 getFieldDecorator
包装的控件,表单控件会自动添加 value
(或 valuePropName
指定的其他属性) onChange
(或 trigger
指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
你不再需要也不应该用
onChange
来做同步,但还是可以继续监听onChange
等事件。你不能用控件的
value
defaultValue
等属性来设置表单域的值,默认值可以用getFieldDecorator
里的initialValue
。你不应该用
setState
,可以使用this.props.form.setFieldsValue
来动态改变表单值。
Form.Item
Form.Item表示一个表单项, 建议其中放一个被 getFieldDecorator 装饰过的 child,如下:
<Form.Item label="标题" required={true} {...formItemLayout}>{getFieldDecorator('url_title', {rules: [{required: true, message: '请输入标题!'}],initialValue:'12345'})(<Input/>)}
</Form.Item>
其中一些重要的属性,如下:
即,我们可以手动设置表单项的校验状态
数据校验
我们使用this.props.form.getFieldDecorator包裹控件时,可以设置该控件的校验规则,如:
一个简单的必须项检验规则如下:
<Form.Item label="标题" required={true} {...formItemLayout}>{getFieldDecorator('url_title', {rules: [{required: true, message: '请输入标题!'}] })(<Input/>)}
</Form.Item>
表单提交
在<Form/>内添加提交按钮
我们在表单内添加了类型为submit的提交按钮,并且设置了Form的提交处理函数,即执行this.handleSubmit。
<Form onSubmit={this.handleSubmit}><Form.Item label="标题" required={true}>{getFieldDecorator('title', {rules: [{required: true, message: '请输入标题!'}],})(<Input prefix={<Icon type="book" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder="..."/>)}</Form.Item><Form.Item><Button type={"primary"} htmlType={"submit"}>提交</Button></Form.Item>
</Form>
当用户点击提交时,我们首先需要判断字段值是否满足其校验规则,若没有错误,我们可以执行我们自定义的提交。
handleSubmit = (e) => {console.log(e)e.preventDefault();this.props.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);this.props.submitData(values);}});}
其中,表单校验的函数说明如下:
获取Form引用后提交
经过 Form.create
之后如果要拿到表单的引用,可以使用 rc-form
提供的 wrappedComponentRef
,详细内容可以查看这里。
class CustomizedForm extends React.Component { ... }// use wrappedComponentRef
const EnhancedForm = Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm
获取到引用后,我们可以接着实现数据验证、提交等操作。
this.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);this.submitData(values);}});
}
表单数据初始化
设置默认值
在使用getFieldDecorator包装的组件的时候,可以添加初始化参数设置默认值。
代码如下:
<Form.Item label="标题" required={true} {...formItemLayout}>{getFieldDecorator('url_title', {rules: [{required: true, message: '请输入标题!'}],initialValue:'12345'})(<Input/>)}
</Form.Item>
与Redux结合
在 Form.create
时,该函数可选一些参数,如下:
mapPropsToFields
, 可以将Props属性的内容直接映射到表单项上。
我们知道connect()函数负责从UI组件生成容器组件,其mapStateToProps函数负可以寄将state转换为props交给UI组件,来供容器组件进行UI渲染。所以我们做了两步操作来实现:
注意:
mapPropsToFields
里面返回的表单域数据必须使用Form.createFormField
包装。
代码如下,表单项须使用getFieldDecorator进行包装。
const WrapperAddMarkFrom = Form.create({mapPropsToFields(props) {console.log(props)return {url_title: Form.createFormField({value: props.formData.XXX,}),url_content: Form.createFormField({value: props.formData.YYY})};})(ControlPanel);function mapDispatchToProps(dispatch) {...}
function mapStateToProps(state) {return{formData:state.data}
}const ControlPanelApp = connect(mapStateToProps,mapDispatchToProps)(WrapperAddMarkFrom)
export default ControlPanelApp
转载于:https://www.cnblogs.com/MrSaver/p/10527192.html
And Design:拓荒笔记——Form表单相关推荐
- ant design form表单的时间处理
ant design form表单的时间处理 用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢? 可以在表单中使用如下代码: import { DatePicker } ...
- Ant Design Vue 如何获form表单里数据 并给 v-decorator绑定的数据重新赋值
最近在用ant design vue 做项目 遇到了 一下坑 比如 v-decorator 可以做数据 绑定 与v-model 不同的是 给 form 表单赋值 v-model 的值是 双向绑定的 如 ...
- antdesign卡片_10分钟精通Ant Design Form表单
目录被人诟病的Form Form的原理 Vue版Form的进化史本文适合React.Vue开发者阅读,10分钟不够?那就再加10分钟. 被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就 ...
- 跟杨春娟学SpringMVC笔记:Form表单之JSR303验证
跟杨春娟学SpringMVC笔记:Form表单之JSR303验证 完成:第一遍 1.如何使用JSR303验证要先导入validation-api和hibernate-validator的依赖jar包? ...
- 跟杨春娟学SpringMVC笔记:Form表单之Spring验证框架
跟杨春娟学SpringMVC笔记:Form表单之Spring验证框架 完成:第一遍 1.Spring框架验证和JSR303验证的不同之处在哪里? 不同一:Spirng框架验证需要实现Validator ...
- 前端学习笔记--AJAX的应用(三)form表单改为AJAX提交
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 参考博客:http://ww ...
- reac笔记_13 form表单元素中 input/defaultValue + useState/useRef
目录 原生html元素 input属性 示例1 示例2 react中 受控组件与非受控组件 属性 error - input标签value属性使用 示例 - useState 示例 - input标签 ...
- Django(part46)--form表单验证
学习笔记,仅供参考 文章目录 form表单验证 举个例子 form表单验证 form提供表单和字段验证,我们可以使用form.is_valid() 方法进行表单验证,若该方法返回值为True,则表示当 ...
- Django(part17)--form表单提交数据
学习笔记,仅供参考,有错必纠 form表单 form表单的主要作用是和服务器进行交互,为服务器端提供数据. name属性 form表单有name属性,name属性类似于客户端与服务器端之间的约定. f ...
最新文章
- Linux中的进程之初步了解
- STL——内存基本处理工具
- Microsoft Dynamics AX 2009 新增功能 – 应用(目录)
- [C编码笔记] 空串与NULL是不一样的
- SkipList 以及高度的确定
- 机器学习:sklearn数据集与机器学习组成
- switch分解试验部分-LAB4:VLAN VTP设置
- C#实现请求服务器,类似于asp下的getHTTPPage(url)功能
- 阿里巴巴Java开发手册--各个版本汇总
- Spark机器学习数据流水线
- 数据结构——八大排序算法(面试必备)
- 读书笔记——极简算法史:从数学到机器的故事 - 吕克·德·布拉班迪尔
- MySQL系统流程图怎么画_Word流程图怎么画?如何轻松绘制流程图
- 网络作战训练模拟仿真管理系统软件
- 【转】中国正爆发聊天APP大战 未来或影响西方
- 青少年蓝桥杯python组(STEMA初级组)
- C语言每日一练——第83天:爱因斯坦的数学题
- mt4软件的详细介绍
- SAR卫星的不同成像模式
- 【踩坑系列】 SpringBoot ,SpringSecurity,activiti 项目无法正常跳转到登录界面
热门文章
- iic总线从机仲裁_总线-IIC-SPI
- mysql字段作用_mysql用户表host字段作用
- mui中子页面标志html,MUI 图标筛选切换(父页面传值子页面)代码
- sql 生成一列1到10的数字_SQL 打印矩阵(三)
- python 字符串方法
- python除法保留两位小数_除法巧算(Ⅱ),任何整数除7~9,11的快速心算技巧,爸妈收藏...
- 大型综合体弱电智能化解决方案标书
- VMware, Inc.VMware VUE考试中心代码
- Spring Boot学习总结(30)—— Spring Native 初体验
- 敏捷开发系列学习总结(11)——Scrum敏捷开发流程的三个角色、四个会议和三个物件