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. DOM操作插入新的子节点

    appendChid.insertBefore首先这两个方法都是添加子节点. append(追加),appendChid:给父节点的子节点末尾添加子节点. insertBefore(newNode, ...

  2. Java概念(一)多态

    多态是一个行为具有不同的形式的能力: 多态是同一个接口,使用不同的实例执行不同操作 一.多态实现方式: 方式一.重写: 方式二.接口: 方式三.抽象类和抽象方法:

  3. include指令和<jsp:include>动作标识区别:--不明觉厉 先收藏

    <jsp:include> 会通过转发的形式,分别编译被包含的文件,所以不怕重命名:而 include 是将多个被包含的原封不动合并后再一起编译一次,所以不可以重命名. ========= ...

  4. Eclipse 各版本号

    查看Eclipse版本号的方法:1.找到eclipse安装目录.2.进入readme文件夹,打开readme_eclipse.html.3.readme_eclipse.html呈现的第二行即数字版本 ...

  5. Javascript - Jquery - 事件

    事件(Event) 文档事件 文档的载入事件 ready(fn) $(document).ready(function () { }); //或$(function () {}); //或$(docu ...

  6. SpringSecurity实现短信验证码登录(Token)

  7. python3编码(encode,decode)

    python3默认编码为unicode,由str类型进行表示.二进制数据使用byte类型表示. 字符串通过编码转换成字节码,字节码通过解码成为字符串 encode:str --> bytes d ...

  8. 新版本微信导致的ios表单bug

    解决方法如下: $(document).delegate('input, textarea, select', 'blur', function(){ setTimeout(function(){ $ ...

  9. Alpha冲刺(8/10)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之8 团队部分 后敬甲(组长) 过去两天完成了哪些任务 首页重新设计 课程时间线确定 答辩准备 接下来的计划 ...

  10. 使用GeoServer导出地图数据GeoJSON并应用

    在项目中,需要使用乡镇街道的地图边界,之前一直使用的是百度地图或Echarts地图,其没有这部分行政区的数据,需要在第三方购买数据,其提供的是shp文件 主文件:counties.shp 索引文件:c ...