antd页面多表单校验

问题

在做antd项目时发现，使用Form.create()(xxx)创建的模块里面的Form表单提交前可以使用this.props.form.validateFieldsAndScroll()判断是否校验成功，this.props.form也就是整个页面模块的Form，那么，如果页面上有多个Form，此时再使用this.props.form.validateFieldsAndScroll()判断校验结果就是对整个页面的Form进行判断，并不能够对单个Form校验结果做判断，问题就在此，如何对单个Form做判断？

解决方法

1. 手动校验，通过对表单元素添加change事件监听，获取表单元素值，手动做校验，这不失为一个方法，但有违react设计的思想。
2. 把表单作为一个组件独立出去，页面通过props传入表单组件需要的值，在表单组件内部单独维护相关逻辑，这也是本文推荐的方式。

案例实现

Form子组件：

import React, { Component } from 'react';
import {Button, Form, Input, Select} from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
  getItemsValue = ()=>{
      const val= this.props.form.getFieldsValue(); // 获取from表单的值
      return val;
  }
  render(){
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: {