getFieldDecorator用法（一）——登录表单
2024-09-04 01:34:09
之前使用antd的ui表单，却没发现这么好用的用法，推荐给大家
import React from "react";
import { Card, Form, Input, Button, message, Icon, Checkbox } from "antd";
const FormItem = Form.Item;
class FormLogin extends React.Component{ handleSubmit = ()=>{
let userInfo = this.props.form.getFieldsValue();
this.props.form.validateFields((err,values)=>{
if(!err){
message.success(`${userInfo.userName}欢迎您 ，当前密码为：${userInfo.userPwd}`)
}
})
} render(){
const { getFieldDecorator } = this.props.form;
return (
<div>
<Card title="登录水平表单" style={{marginTop:10}}>
<Form style={{width:300}}>
<FormItem>
{
getFieldDecorator('userName',{
initialValue:'',
rules:[
{
required:true,
message:'用户名不能为空'
},
{
min:5,max:10,
message:'长度不在范围内'
},
{
pattern:new RegExp('^\\w+$','g'),
message:'用户名必须为字母或者数字'
}
]
})(
<Input prefix={<Icon type="user"/>} placeholder="请输入用户名" />
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('userPwd', {
initialValue: '',
rules: []
})(
<Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('remember', {
valuePropName:'checked',
initialValue: true
})(
<Checkbox>记住密码</Checkbox>
)
}
<a href="#" style={{float:'right'}}>忘记密码</a>
</FormItem>
<FormItem>
<Button type="primary" onClick={this.handleSubmit}>登录</Button>
</FormItem>
</Form>
</Card>
</div>
);
}
}
export default Form.create()(FormLogin);
使用getFieldDecorator ，因为是antd的form的属性，所以需要导出form组件，export default Form.create()(FormLogin);
效果：
可通过getFieldDecorator进行规则校验，并在点击登录按钮时校验
handleSubmit = ()=>{
let userInfo = this.props.form.getFieldsValue();
this.props.form.validateFields((err,values)=>{
if(!err){
message.success(`${userInfo.userName}欢迎您 ，当前密码为：${userInfo.userPwd}`)
}
})
}
获取表单信息，判断是否有err，有的话则显示
还有一点就是Checkbox初始化默认选中需要2个条件
valuePropName:'checked',
initialValue: true
最新文章
- C#属性-索引器-里氏替换-多态-虚方法-抽象-接口-泛型-
- SQLITE配置环境变量
- RabbitMQ、ActiveMQ和ZeroMQ
- [转载]Java的内存回收机制
- C#“简单加密文本器”的实现
- 简洁的MysqlHelper
- （转）三角函数计算，Cordic 算法入门
- POJ 2695 The Pilots Brothers' refrigerator(神奇的规律)
- VAO VBO IBO大乱炖
- 忘记了root密码，如何进入系统?
- 201521123119 《Java程序设计》第13周学习总结
- 在控制台显示“Hello World”
- CKEditor 集成CKFinder集成
- java 语法分析器 括号匹配
- Android Multimedia框架总结（六）C++中MediaPlayer的C/S架构
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
- mybatis的基本语句的应用
- Java 输入/输出——处理流（BufferedStream、PrintStream、转换流、推回输入流）
- 新建一个Windows Service的方法
- 搭建RESTful API 之 实现WSGI服务的URL映射