如何将子组件的验证数据（作为 formik 表单）传递给其父组件并处理父组件中的表单提交

有没有办法将 formik 表单值从子组件传递到父组件并仅在父组件中处理表单提交。 我有一个用例，我正在为餐厅构建表单。 该表格将有很多字段。所以我将它们分组并创建了单独的较小的 formik 表单组件。 所有子组件的验证模式（是的）都写在子组件内部。

或者如果有其他方法可以完成此任务，请告诉我。

class FirstChildForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            firstChildFormData: {}
        }
    }

    render() {
        return (
            <Formik
              initialValues={{ }}
              validationSchema={{ }}
              {props => {const {values} = props;
                return(
                 <div>First Form</div>
                )
              }}
            )
      }
}


class SecondChildForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            secondChildFormData: {}
        }
    }

    render() {
        return (
            <Formik
              initialValues={{ }}
              validationSchema={{ }}
              {props => {const {values} = props;
                return(
                 <div>Second Form</div>
                )
              }}
            )
      }
}



export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
              firstFormData : '',
              secondFormData : '',
            },
        }
    }

    handleSubmit = () => {

    }

    render() {
        return (
            <Formik
              initialValues={{ }}
              validationSchema={{ }}
              {props => {const {values, isSubmitting} = props;
                return(
                 <div className='finalform'>
                   <FirstChildForm />
                   <SecondChildForm />

                    <button onClick={this.handleSubmit}> 
                     Submit</button>
                 </div>
                )
              }}
            )
      }

}

通过使用道具你可以实现这一点。

屏幕 1：

render(
 <View>
          <Screen2
            onValueChange={() => {
              this.setState({formProps: formProps});
            }}
          />
          <FormButton
            formProps={this.state.formProps}
            // @ts-ignore
            onPress={formProps.handleSubmit}
            // tslint:disable-next-line:no-duplicate-string
            title={'checkout'}
          />
        </View>
)

屏幕 2：

if (onValueChange) {
     onValueChange(formProps);
 }