关于antd如何在表单外点击触发表单验证的问题

需求：由于业务需要，表单过大的问题，我把表单和提交按钮分开成了两个组件，如图：

需求草稿

涉及知识点：父子通信，ref的使用

解决思路：
1.点击按钮时告知父级这一行为：

按钮组件

import { Button } from 'antd';
import style from './Footer.less'

export default class Footer extends React.Component {
  handleSubmitForm() {
    this.props.handleSubmitForm()
  }
  render() {
    return 

      取消
      提交
    
  }
}

传送门：https://www.kancloud.cn/ppyy321/react/273596

2.父级接收子组件传递的信息

import React from 'react';
import Footer from './Footer' //我是按钮组件
export default class AddTenement extends React.Component {

  // 我是触发子级点击事件
  handleSubmitForm() {
  console.log('我是能打印出来表示父级接收到我的信息了')
  }
  render() {
    return 
      

    
  }
}

3. 先在父组件定义一个属性bindRef传入表单组件TenementDetail中，

//父组件
import React from 'react';
import TenementDetail from './TenementDetail' //表单组件

import Footer from './Footer'
export default class AddTenement extends React.Component {
 bindRef = ref => { this.child = ref }
  render() {
    return 
      
      

    
  }
}

子组件接收到这个方法后把this回传给父组件，this.child是父组件接收到的this挂载到child上面，这样子this.child就是子组件的this，如此就能直接操作子组件了

//子组件
import React from 'react';
export default class TenementDetail extends React.Component {
 componentDidMount() {
    this.props.triggerRef(this)
  }
}

传送门：https://juejin.im/post/5c26137d5188257dc54af75c
4.最后一步：我们就能在父组件里直接操作子组件的提交事件啦

import React from 'react';
import TenementDetail from './TenementDetail'
export default class AddTenement extends React.Component {

  // 我是触发子级点击事件
  handleSubmitForm() {
    this.child.handleSubmit()
  }
}

这是我的解决方法，写的有点乱，如果有更好的解决方法，欢迎分享~