Ant design pro 开发笔记 - 表单和数据绑定

2018-05-25 admin

antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。

{
    getFieldDecorator('email', {})(<Input />)
}

第二个参数是options,不同的配置可以完成更多的任务,例如必填数据验证

{
    let opt = { rules: [ { required: true, message: "the field must supply." } ] }
    getFieldDecorator('email', opt)(<Input />)
}

也可以完成更多业务逻辑数据验证,例如:

{
    let opt = { rules: [ { type: 'email', message: "It's invalid email address." } ] }
    getFieldDecorator('email', opt)(<Input />)
}

还可以指定一个初始值:

{
    let opt = { initialValue: 'hello@mail.com' }
    getFieldDecorator('email', opt)(<Input />)
}

注意:通过initialValue指定的初始值,只在第一次render()中起作用。如果我们通过API获取了数据之后,表单数据不会发生变化。 这个时候就要用到mapPropsToFields()来为字段绑定数据。

{
    function mapModelToProps(model) {
      return {
        item: model.requirement.item,
        loading: model.loading.effects['requirement/fetch']
      };
    }
    function mapPropsToFields(props) {
      return {
        description: Form.createFormField({
          value: props.item.description
        })
      }
    }
    export default connect(mapModelToProps)(Form.create({mapPropsToFields})(Edit));
}

这里有两个函数来map所需要的数据:

  1. mapModelToProps()将state中所需要的数据映射到props上。
  2. mapPropsToFields()则将props中的数据映射到表单字段上,并更新字段的value值。注意使用这个函数必须用Form.createFormField()封装需要绑定的字段。

Ant design使用的表单组件是rc-form 使用的验证组件是async-validator

[转载]原文链接:https://segmentfault.com/a/1190000015025000

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-32991.html

文章标题:Ant design pro 开发笔记 - 表单和数据绑定

相关文章
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
node.js调用C++开发的模块实例
如何用C++和node交互,在node的程序中,如果有大数据量的计算,处理起来比较慢,可以用C++来处理,然后通过回调(callback的形式),返回给node。先回顾一下正统的用 C++ 开发 native 模块的方法 #include ...
2017-03-25
element动态表单验证prop用法
基于Vue的Element.js的Form组件中,提供了一个动态增减表单的验证逻辑,这在项目中的提供了很大帮助。 但在实际写代码过程中,会遇到很多的坑,特别是动态添加验证规则时,prop属性不知道怎么用。 1、el-form标签的model...
2018-06-27
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
哪些互联网产品适合用HTML5开发?
J.P. Morgan(摩根大通集团)不久前发布了有关2013年互联网公司股票的研究报告,其中在预测2013年趋势时,提及移动互联网有关web和app之间的辩论将在3到5年内继续,而摩根认为这对于搜索产品和谷歌是利好消息,因为用户需要处理复...
2015-11-12
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
回到顶部