Блог

У меня есть страница, которая разделена на две части: несколько полей и кнопка для отправки / проверки верхней половины и несколько полей и кнопка для отправки / проверки нижней половины. Однако я не видел в документации, как это делается?

Что-то вроде этого:

 <Formik
    initialValues={{
        email: 'foo@bar.com',
        password: '',
        
        address1: '',
        address2: '',
    }}

    handleFirstBtn={ values => {
    }}

    handleSecondtBtn={ values => {
    }}
>
    <Form>
        <div>
            <Field name="email" type="text" />
            <Field name="password" type="password" />        
            <button type="button" onClick={this.handleFirstBtn}>Submit</button>
            
            <Field name="address1" type="text" />
            <Field name="address2" type="text" />        
            <button type="button" onClick={this.handleSecondtBtn}>Submit</button>
        </div>
    </Form>

</Formik>
  

 class Demo extends React.Component {

Form1Callback = (values) => {
    console.log('formcallback1', values);
}

Form2Callback = (values) => {
    console.log('formcallback2', values);
}

render() {
    return (
        <div>
            <h2>Formik Demo</h2>
            <h3>form1</h3>
            <Form1 submit1={this.Form1Callback} /><br/>
            <h3>form2</h3>
            <Form2 submit2={this.Form2Callback} />

        </div>
    )
 }
 }


  const Form1 = (props) => {
 return (
    <div>
        <Formik
        initialValues={{email1:'',password1:'',}}
        onSubmit={(values)=>{
           props.submit1(values);
        }}>
            <Form>
                <Field type="email" name="email1" /><br />
                <Field type="password" name="password1" /><br />
                <button type="submit" >
                    Submit
                     </button><br />
            </Form>
        </Formik>
    </div>
 )
 }


 const Form2 = (props) => {
return (
    <div>
        <Formik
        initialValues={{email2:'',password2:'',}}
        onSubmit={(values)=>{
            props.submit2(values);
        }}
        >
            
            <Form>
                <Field type="email" name="email1" /><br />
                <Field type="password" name="password1" /><br />
                <button type="submit" >
                    Submit
                     </button><br />
            </Form>
        </Formik>
    </div>
 )
 }
  

ну, вот POC для вашей проблемы. Это работает в соответствии с вашими требованиями