react之antd表单

Ant Design Form组件提供了一个create方法，使用form.create()(component)处理之后的component 会接收到一个props.form，使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。

import {Form} from 'antd'
 
class LoginForm extends React.Component{
    ...
    // DidMount给表单项赋初值，通常用于编辑已有表单
    componentDidMount(){
        const {tag, form} = this.props;
        let formTag = [];
        for(let i = 0; i < tag.length; i ++){
            formTag = formTag.concat([tag[i].tagLabel, tag[i].tagValue]);
        }
        form.setFieldsValue({
            'formTag': formTag
        });
    }
    ...
    render(){
        const {getFieldDecorator} = this.props.form;
        
        //表单布局
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
        };
        ...
        return(
            <Form {...formItemLayout}>
                <Form.Item label="物理值">
                    {getFieldDecorator('dictCode', {
                        rules: [
                            {
                                required: true,
                                message: '物理名称不能为空',
                            },
                        ],
                        })(<Input />)}
                </Form.Item>
                ...
            </Form>
        );
    }
}
 
export default Form.create()(LoginForm);