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. 解释局域(LAN)和广域网(WAN)之间的区别,它们之间的关系是什么?

    解释局域(LAN)和广域网(WAN)之间的区别,它们之间的关系是什么?

  2. flask 连接数据库

    FLASK 连接mysql 数据库 1 # -*- encoding: utf-8 -*- 2 3 from flask import Flask 4 #导入第三方连接库 5 from flask_s ...

  3. nginx 目录讲解

  4. oracle查看未提交事务

    SELECT s.sid, s.serial#, s.event, a.sql_text, a.sql_fulltext, s.username, s.status, s.machine, s.ter ...

  5. Sql server—— for xml path简单用法(可以按照分组把相同组的列中的不同的值,像字符串一样拼接在一起显示在分组之后的列中。)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI8AAACWCAIAAABo2EyXAAAKeklEQVR4nO2dy27rNh7G+U7CFIrfZX

  6. Path Sum I && II & III

    Path Sum I Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that ad ...

  7. c++不定参数函数

    不定参数当年做为C/C++语言一个特长被很多人推崇,但是实际上这种技术并没有应用很多.除了格式化输出之外,我实在没看到多少应用.主要原因是这种技术比较麻烦,副作用也比较多,而一般情况下重载函数也足以替 ...

  8. shell中的dd命令使用详解

    一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...

  9. 032_nginx配置文件安全下载

    一. server { listen 8866; server_name _; access_log /usr/local/etc/nginx/log/download.access.log main ...

  10. Mybatis--01

    mybatis 封装jdbc访问代码的一个框架 (hibernate)  ORM对象关系映射 SpringMVC:用来封装servlet的框架 (struts) Spring:体系整合框架,其他框架的 ...