如何将子组件的经过验证的数据(作为Formik表单)传递给其父组件，以及如何处理父组件中的表单提交 [英] how to pass a child component's validated data (as a formik form) to its parent component and handle form submission in parent

问题描述

是否有一种方法可以将Formik表单值从子组件传递到父组件，并仅在父组件中处理表单提交. 我有一个用例，其中我正在为餐厅构建表单. 该表格将包含许多字段.因此，我将它们分组并创建了单独的较小的Formik表单组件. 所有子组件的验证模式(yup)都写在子组件内部.

Is there a way to pass formik form values from a child component to a parent component and handle form submission in parent component only. I have a use case where I'm building a form for restaurant. The form will have many many fields. So I grouped them and created seperate smaller formik forms component. All the child components' validation schema (yup) are written there inside the child component.

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

Or if there is any another method to accomplish this task, please let me know.

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>
                )
              }}
            )
      }

}

推荐答案

通过使用道具，您可以实现这一目标.

by using props you can achieve this.

屏幕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);
 }

这篇关于如何将子组件的经过验证的数据(作为Formik表单)传递给其父组件，以及如何处理父组件中的表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！