ant design 子对象验证 ant design form

内联登录栏，常用在顶部导航栏中。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Icon, Input, Button } from 'antd';
function hasErrors(fieldsError) {//getFieldsError()  
    return Object.keys(fieldsError).some(field => fieldsError[field]);
  }
class HorizontalLoginForm extends React.Component {
    componentDidMount() { /*componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。*/
        this.props.form.validateFields();
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form:', values);
            }
        });
    };
    render() {
        /* 
        getFieldDecorator:用于和表单进行双向绑定，详见下方描述
        getFieldError:获取某个输入控件的 Error
        getFieldsError	获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error
        isFieldsTouched	判断是否任一输入控件经历过 getFieldDecorator 的值收集时机 options.trigger
        */
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        
        const usernameError = isFieldTouched('username') && getFieldError('username');
        const passwordError = isFieldTouched('password') && getFieldError('password');


        return (
            <Form layout='inline' onSubmit={this.handleSubmit}>
                <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
                    {getFieldDecorator('username', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="Username"//placeholder 属性提供可描述输入字段预期值的提示信息（hint）
                        />,
                    )
                    }
                </Form.Item>
                <Form.Item validateStatus={passwordError ? 'error' : ''} help={passwordError || ''} >
                    {getFieldDecorator(
                        'password', {
                        rules: [
                            { required: true, message: 'Please input your Password!' }
                        ],
                    })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        type="password"
                        placeholder="Password"
                        />)}
                </Form.Item>
                <Form.Item>
                    <Button type = 'primary'  htmlType = 'submit' disabled ={hasErrors(getFieldsError())}>
                        log in
                    </Button>
                 </Form.Item>
            </Form>
        )

    }
}
const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm)
ReactDOM.render(<WrappedHorizontalLoginForm />, document.getElementById('container'));

内联表单需要用到的一些方法和属性说明

From 属性

参数	说明	类型
layout	表单布局	‘horizontal’|‘vertical’|‘inline’
onSubmit	数据验证成功后回调事件	Function(e:Event)

Form.create(options)

class CustomizedForm extends React.Component {}

CustomizedForm = Form.create({})(CustomizedForm);

options 的配置项如下

参数	说明	类型
name	设置表单域内字段 id 的前缀

经过 Form.create 包装的组件将会自带 this.props.form 属性注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。

getFieldDecorator	用于和表单进行双向绑定，详见下方描述
getFieldError	获取某个输入控件的 Error	Function(name)
getFieldsError	获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error	Function([names: string[]])
validateFields	校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件	( [fieldNames: string[]], [options: object], callback(errors, values) ) => void
isFieldTouched	判断一个输入控件是否经历过 getFieldDecorator 的值收集时机 options.trigger	(name: string) => boolean

一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child 当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。

参数	说明	类型	默认值
help	提示信息，如不设置，则会根据校验规则自动生成	string|ReactNode
validateStatus	校验状态，如不设置，则会根据校验规则自动生成，可选：‘success’ ‘warning’ ‘error’ ‘validating’	string

this.props.form.getFieldDecorator(id, options)

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

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

参数	说明	类型	默认值
id	必填输入控件唯一标志。支持嵌套式的写法。	string
options.rules	校验规则，参考下方文档	object[]

校验规则

参数	说明	类型	默认值
required	是否必选	boolean	false
message	校验文案	string|ReactNode

Input

参数	说明	类型	默认值
type	声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")。	string	text
prefix	带有前缀图标的 input	string|ReactNode
placeholder	placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。	string	text

Icon

参数	说明	类型	默认值
type	图标类型。遵循图标的命名规范	string
style	设置图标的样式，例如 fontSize 和 color	CSSProperties

<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />

Button

属性	说明	类型	默认值
type	设置按钮类型，可选值为 primary dashed danger link(3.17 中增加) 或者不设	string
htmlType	设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button
disabled	按钮失效状态	boolean	false

Object.keys()

**Object.keys()**方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。