Form 组件：仅提供样式与事件，会生成一个form元素
form 对象：处理数据验证、生成、获取
Form.Item 表单项：它仅对它的直接子元素生效

Form用的是栅格化

Form

createOptions(){
    const options = [];
  for(let i = 1980; i <= 2012; i++){
      options.push(<Select.Option key={i} value={i}>{i}年</Select.option>);
  }
}
handleSubmit = (e) => {
    e.preventDefault();
  console.log(this.props.form.getFieldsValue());
  this.props.form.validateField((err, values) => {
      if(err!==null){
        //验证通过
      console.log(values);
    }else{
        console.log(err);
    }
  });
}
render(){
  const { getFieldDecorator } = this.props.form;
  return (
    <Form 
    labelCol={{span: 2}}//这个是每个表单项的label的宽度
    wrapperCol={{span: 10}}//这个是总长
      >
      <Form.Item label="账号">
        { getFieldDecorator('loginId', {
            rules: [
            {
                required: true,
                    message: '账号必须填写'
            },
          ],
        })(<Input />) }
      </Form.Item>
      <Form.Item label="密码">
        { getFieldDecorator('loginPwd', {
            rules: [
            {
                required: true,
                    message: '密码必须填写'
            },
          ],
        })(<Input.Password />) }
      </Form.Item>
      <Form.Item label="性别">
        { getFieldDecorator('sex')(
                <Radio.Group>
                <Radio.Button value={0}>男</Radio.button>
                   <Radio.Button value={1}>女</Radio.button>
            </Radio.Group>
        ) }
      </Form.Item>
      <Form.Item label="班长">
        { getFieldDecorator('isMonitor', {
            valuePropName: 'checked',
          initialValue: false,//默认值
        })(<Switch />) }
      </Form.Item>
      <Form.Item label="出生年份">
        { getFieldDecorator('birth', {
            valuePropName: 'checked',
        })(
              this.createOptions()
        ) }
      </Form.Item>
      <Form.Item label="手机号">
        { getFieldDecorator('phone', {
            rules: [
            {
                required: true,
                    message: '请填写手机号'
            },
            {
                pattern: /1\d{10}/, message: '手机号格式不正确',
            }
          ],
        })(<Input />) }
      </Form.Item>
      <Form.Item label="住址">
        { getFieldDecorator('address')(<Input />) }
      </Form.Item>
      <Form.Item label="邮箱">
        { getFieldDecorator('email', {
            rules: [
            {
                required: true,
                    message: '请填写邮箱'
            },
            {
              pattern: /\w+@\w+(\.\w+){1,2}/,
              message: '邮箱格式不正确',
            }
          ],
        })(<Input />) }
      </Form.Item>
      <Form.Item wrapperCol={{offset: 2}}>
          <Button htmlType='submit' type='primary'>
            提交
          </Button>
      </Form.Item>
      </Form>
  );
}
function getFieldConfig(obj){
    const result = {};
  for(const prop in obj){
      result[prop] = From.createFormField({
        value: obj[prop]
    });
  }
  return result;
}
const HOC = Form.create({
  //把父组件的属性映射到表单项上
    mapPropsToFileds: props => ({
      sex: Form.createFormField({
        value: 0,
    }),//不能直接写0, 1 变量啥的; 但是这么写又比较麻烦,所以可以写个函数,统一生成,getFieldConfig
    isMonitor: Form.createFormField({
        value: false,
    })
  }),
});
export default HOC(StudentForm);

Form上的事件：

onSubmit:
侦听 htmlType为 submit 的button，又因为form表单元素提交默认会刷新页面，所以需要先阻止默认事件
在handleSubmit内部先写：e.preventDefault();

form 对象

如何得到这个form对象？

1. 通过 Form.create(配置对象); 得到一个高阶组件（HOC），该HOC会将form对象作为属性prop，注入到传递过来的组件中。 export default HOC(要传进来的关于Form的组件);
   1. 传给create的配置对象，就可以配置整个表单里的数据及一些属性
2. const { getFieldDecorator } = this.props.form;//当调用解构出来的函数时，就会返回一个HOC
   1. getFieldDecorator(‘填写标识—要受控的表单子项的属性名’)(< Input />)
   2. this.props.form.getFieldsValue(); 可以得到关联着这个表单数据对象了，{ loginId: ‘xxxx’, }
   3. getFieldDecorator根据传入组件的 value 属性，使其受控，所以如果是 checked等 就会报错！
   4. 可以传入第二个参数，是配置对象，里面的valuePropName就可更改依赖的受控属性。rules数组就是校验规则相关的
3. Form.createFormField({ value: xxxx }); 创建表单项数据
4. this.props.form.getFieldsValue((err, values) => {}); 在这里就会进行校验
5. this.props.form.setFields(表单项数据—由createFormField创建的); 就可以设置表单数据

   Form.Item

   它仅对它的直接子元素生效

图片上传

请求地址：http://101.132.72.36:5100/api/upload
请求方式：post
请求调试工具：postman
表单格式：form-data
表单域名称（就是key）：imagefile

服务器返回结果：

1. 没错误：{ “path”: ‘访问路径’ } json格式
2. 有错误：{ “error”: ‘错误信息 }