react Form 表单子组件向父组件传表单值

在项目中，经常会用到子组件向父组件传递表单的值，并且在父组件点击按钮时，触发子组件表单的验证

子组件:
表单用ref={this.formRef}创建一个react表单容器，当页面加载完时，调用父组件的onSubmit方法，将onFinish方法传递给父组件

  formRef = React.createRef()
  
  componentDidMount() {
        this.props.onSubmit(this.onFinish)
    }
    
   onFinish=()=>{
        this.props.getSubmitReq()
    }


  <Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
              <Form.Item name='username' label='用户名'
                         rules={[{ required: true, message: '请输入用户名' },
                                {min:1,message:'用户名不能少于一位！'},
                                {max:10,message:'用户名不能多于10位！'},
                                {pattern:/^[a-zA-Z0-9_]+$/,message:'用户名只能由数字，字母，下划线组成！'}]}>
                  <Input placeholder='请输入用户名' />
              </Form.Item>
  <Form>

父组件：
this.userFormRef.current.formRef.current.submit()
触发form表单的提交验证方法

this.userFormRef.current.formRef.current.getFieldsValue()
得到表单的值

 this.userFormRef = React.createRef()
 
 //将子组件传递的onFinish方法放在state
 onSubmit = (onFinish) => {  
        this.setState({
            onFinish
        })
    }
    
//得到表单对象的值
  getSubmitReq=async ()=>{
        const formData = this.userFormRef.current.formRef.current.getFieldsValue()
        const result = await reqAddUser(formData)
        if (result) {
            this.setState({
                modalStatus: 0
            })
            this.getUserList()
        }
    }
    
  //点击提交按钮时触发该方法，触发表单提交事件，表单提交事件会触发onFinish()
   comformAddUser = () => {
        this.userFormRef.current.formRef.current.submit()
    }

 
  //引入子组件
  <AddUser ref={this.userFormRef} onSubmit={this.onSubmit} getSubmitReq={this.getSubmitReq}/>