之前使用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