如何使用 Formik 在一个页面上有多个提交处理程序？

Question

我有一个分为两部分的页面：上半部分 submit/validate 一些字段和按钮，下半部分 submit/validate 一些字段和一个按钮。但是，我没有在文档中看到这是如何完成的？

像这样：

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

Answer 1

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。这是按照您的要求工作的

如何使用 Formik 在一个页面上有多个提交处理程序？

How to have multiple submit handlers on a page using Formik?

javascript

reactjs

formik