antd中的Form组件

import React from "react"
import { Form, Icon, Input, Button } from 'antd';

function hasErrors(fieldsError) {
    // console.log(fieldsError)
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class HorizontalLoginForm extends React.Component {
  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
    // console.log(this.props)
    // validateFields:校验并获取一组输入的值与Error，若filedNames参数为空，则校验全部组件
  }

  handleSubmit = e => {
    e.preventDefault();
    // validateFields:校验并获取一组输入的值与Error，若filedNames参数为空，则校验全部组件
    this.props.form.validateFields((err, values) => {
        // console.log(err,values)//err--->null   values:{username:文本框中的内容,password:文本框中的密码}
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    // getFieldDecorator:用于和表单进行双向绑定
    // getFieldsError：获取一组输入控件的Error，如不传入参数，则获取全部组件的Error
    // getFieldError：获取某个控件的Error=====>Function(name)
    // isFieldTouched:判断一个输入控件是否经历过getFiledDecorator的值收集时机options.trigger=====>(name:string)=>boolean

    // Only show error after a field is touched.
    const usernameError = isFieldTouched('username') && getFieldError('username');
    const passwordError = isFieldTouched('password') && getFieldError('password');
    return (
        // layout:表单布局====>"horizontal"|"vertical"|"inline"
        // onSubmit:数据验证成功后回调事件====>Function(e:Event)
      <Form layout="inline" onSubmit={this.handleSubmit}>
          {/* validateStatus:校验状态，如不设置，则会根据校验规则自动生成，可选：""success","warning","error","validating" */}
          {/* help:提示信息，如不设置，则会根据校验规则自动生成=====>string|ReactNode */}
        <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
        {/* getFieldDecorator(id,options):
            id:必填输入控件唯一标志====>string
            options:
                rules:校验规则===>object[]
        */}
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
            // prefix:带有前缀图标的input====>string|ReactNode
            // placeholder:默认值
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </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>
            {/* htmlTye:设置button原生的type值====>string("submit","reset","button") */}
            {/* disabled:俺妞妞失效状态===>boolean */}
          <Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
            Log in
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm);

export default WrappedHorizontalLoginForm