Question

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

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

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

}

Answer 1

通过使用道具将其存档。

屏幕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表单）传递给其父组件，以及如何处理父组件中的表单提交

1 个答案: