antd中Form及其getFieldDecorator的应用

antd中Form及其getFieldDecorator的应用

import React  from 'react'
import {Card,Form,Input,Button,message} from 'antd' 
const FormItem= Form.Item;

class FormLogin extends React.Component{

    handleSubmit=()=>{
       let userInfo =  this.props.form.getFieldsValue();
       //此时这里得userInfo   与  values值是一样得
       //getFieldsValue  获取一组输入控件的值，如不传入参数，则获取全部组件的值
       // validateFields  校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件
       console.log('Received values of userInfo: ', userInfo);
        this.props.form.validateFields((err,values)=>{
            if (!err) {
                //message.success(`${values.username} 欢迎您`)
                message.success(`${userInfo.username} 欢迎您`)
                console.log('Received values of form: ', values);
            } else {
                
            }
        })
    }
    render(){        
        const { getFieldDecorator} = this.props.form;
        return (
            <div>                
                <Card>
                <Form title="水平方向表单" style={{width:300}}>
                        <FormItem>
                            {
                            getFieldDecorator('username',{
                                rules: [
                                    { required: true, message: '账号不能为空!' },
                                    {min:5,max:10,message: '不再长度范围内!'},                           
                                ],
                            })(
                            <Input placeholder="请输入账号" />
                            )}                        
                        </FormItem>
                        <FormItem >
                            {
                                getFieldDecorator('password',{
                                rules: [
                                    { required: true, message: '密码不能为空!' },
                                    {min:5,max:10,message: '不再长度范围内!'}
                                ],                               
                                })(
                            <Input placeholder="请输入密码"/>
                                )}                           
                        </FormItem>
                        <FormItem >
                            <Button type="primary" onClick={this.handleSubmit}>登录</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }

}
export default  Form.create()(FormLogin);

• 经 Form.create() 包装过的组件会自带 this.props.form 属性
• 经 Form.create() 包装过的组件会自带 this.props.form 属性
• wrappedComponentRef用于获取表单中得元素

class CustomizedForm extends React.Component { ... }

let data = this.form.props.form.getFieldsValue();

// use wrappedComponentRef
const EnhancedForm =  Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm

• 经过 Form.create 包装的组件将会自带 this.props.form 属性，this.props.form 提供的 API

• let userInfo = this.props.form.getFieldsValue(); //获取表单中得所有值

• this.props.form.validateFields //获取一组输入控件的值，如不传入参数，则获取全部组件的值

• const { getFieldDecorator} = this.props.form;

getFieldDecorator
经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
2. 你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。
3. 你不应该用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值。

getFieldDecorator(id, options) 参数

• 布局

const formItemLayout = {
            labelCol:{
                xs:24,
                sm:4
            },
            wrapperCol:{
                xs:24,
                sm:12
            }
        }

• Input 框

 {
                            getFieldDecorator('username',{
                            //验证规则
                                rules: [
                                    { required: true, message: '账号不能为空!' },
                                    {min:5,max:10,message: '不再长度范围内!'},                           
                                ],
                            })(
                            <Input placeholder="请输入账号" />
                            )
}      

• Radio

<FormItem label="性别" {...formItemLayout}>
                            {
                                getFieldDecorator('sex', {
                                    initialValue: '1'
                                })(
                                    <RadioGroup>
                                        <Radio value="1">男</Radio>
                                        <Radio value="2">女</Radio>
                                    </RadioGroup>
                                )
                            }
 </FormItem>

-InputNumber 数字输入框

<FormItem label="年龄" {...formItemLayout}>
                            {
                                getFieldDecorator('age', {
                                    initialValue: 18
                                })(
                                    <InputNumber  />
                                )
                            }
  </FormItem>

• Select 选择器

   <FormItem label="当前状态" {...formItemLayout}>
                            {
                                getFieldDecorator('state', {
                                    initialValue: '2'
                                })(
                                    <Select>
                                        <Option value="1">咸鱼</Option>
                                        <Option value="2">浪子</Option>
                                        <Option value="3">才子</Option>                                        
                                    </Select>
                                )
                            }
 </FormItem>

• Switch 开关

 <FormItem label="是否已婚" {...formItemLayout}>
                            {
                                getFieldDecorator('isMarried', {
                                    valuePropName:'checked',
                                    initialValue: true
                                })(
                                    <Switch/>
                                )
                            }
</FormItem>