import  React  from  'react';
import  {Form,Input,Select,Button ...}  from  'antd';

class  PageName  extends  React.Component{
         render(){
              const  {getFieldDecorator}  = this.props.form;
              return(
                  <Form>
                       <Form.Item  label='姓名'>
                            {
                              getFieldDecorator(
                                  'name',{
                                     rules:[
                                     {required:true,message:'请输入姓名'}
                                     ]
                                  }
                              )                              (<Input></Input>)
                            }
                       </Form.Item>
                  </Form>
          )
    }
}  

export  default  Form.create()(PageName)

官方文档:
form.create:  https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140                            

当时用了form.create包装后的组件,会自带 this.props.form 属性

参见文档:https://ant.design/components/form-cn/

antDesign 使用Form并进行表单验证的更多相关文章

  1. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  2. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  3. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  4. validate表单验证插件

    1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 / ...

  5. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  6. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  7. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  9. vue 常用的表单验证,包括手机号码,固定电话和身份证...

    <template> <div> <pl-content-box> <pl-page-nav :show-previous=true></pl-p ...

随机推荐

  1. redis-deskmanager 连不上 虚拟机 - centos redis

    1.没设置redis密码 : https://blog.csdn.net/HUXU981598436/article/details/54668779 2.关闭防火墙

  2. 2017-2018-2 20165234 实验四《Android程序设计》实验报告

    一.实验报告封面 课程:Java程序设计   班级:1652   姓名:刘津甫   学号:20165234 指导教师:娄嘉鹏    实验日期:2018年5月14日 实验时间:13:45 - 3:25 ...

  3. Navicat for Mysql连接mysql数据库时出现 2003-Can't connect to MySql server on 'localhost'(10061)

    一.环境:linux服务器下 二.问题:在windows7下使用Navicat for Mysql连接mysql数据库时出现 2003-Can't connect to MySql server on ...

  4. 对mysql乐观锁、悲观锁、共享锁、排它锁、行锁、表锁概念的理解

    乐观锁 乐观锁是指操作数据库时(更新操作),想法很乐观,认为这次的操作不会导致冲突,在操作数据时,并不进行任何其他的特殊处理(也就是不加锁),而在进行更新后,再去判断是否有冲突了. 实现: 通常实现是 ...

  5. srping mvc 集成CXF 导致类初始化两遍

    cxf依赖于spring的ContextLoaderListener,而spring mvc 则依赖于DispatcherServlet. 初始化DispatcherServlet的时候会依赖初始化一 ...

  6. JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m

    https://blog.csdn.net/u012882327/article/details/69525166

  7. Python3学习笔记05-数字

    Python 数字数据类型用于存储数值 数字类型不能修改,如果改变数字数据类型的值,将重新分配内存空间 以下实例在变量赋值时 Number 对象将被创建: var1 = 10 var2 = 20 也可 ...

  8. 在VC中改变TAB顺序的方法

    用VC来写MFC程序的时候,多数情况下,会发现TAB顺序和预期的顺序不一致,那么这时就有必要重新调整TAB顺序, 来适应我们所写的程序. 调整TAB顺序的方法有两种: 1.在当前的界面或对话框下按“C ...

  9. 打印机wifi

    给人修理了半天共享打印机问题,连接不上,被共享机为32位xp系统,共享机为64位win7系统,共享时无法安装驱动,最后知道打印机具备连接wifi功能,然后用官网驱动连接打印机即可.out了,现在打印机 ...

  10. js垃圾回收(转

    和C#.Java一样JavaScript有自动垃圾回收机制,也就是说执行环境会负责管理代码执行过程中使用的内存,在开发过程中就无需考虑内存分配及无用内存的回收问题了.JavaScript垃圾回收的机制 ...