每个Mui步进器上的Formik验证

问题描述

我正在使用Material UI步进器，每个步骤都有不同的组件。我正在尝试使用Yup验证每个步骤并使用了Formik，但不是验证它而是继续进行下一步。我该如何在每个步骤上进行验证，并最终获得每个步骤的所有数据。

import React from 'react';
..
import FormStep1 from './FormStep1';
import FormStep2 from './FormStep2';


function getSteps() {
    return ['Select general campaign settings','Ads setting','Upload Ad contents','Review and Submit'];
}

function getStepContent(stepIndex,handleStepSubmit,handleNext) {
    switch (stepIndex) {
        case 0:
            return <FormStep1 onSubmit={handleStepSubmit} onNext={handleNext}/>;
        case 1:
            return <FormStep2 />;
        case 2:
            return 'No need to worry abt this!';
        default:
            return 'UnkNown stepIndex';
    }
}

const IobdCampCreate = () => {

    const classes = useStyles();
    const [activeStep,setActiveStep] = React.useState(0);
    const [state,setState] = React.useState({
        steps: [
            { name: 'Select general campaign settings',data: {} },{ name: 'form2',data: {} }
        ],activeStep: 0,});
    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleReset = () => {
        setActiveStep(0);
    };

    const handleStepSubmit = (stepIndex,data) => {
        console.log("-------",stepIndex,data)
        setState((prevstate) => ({
            ...prevstate,activeStep: prevstate.activeStep + 1,steps: prevstate.steps.map((step,index) => {
                if (stepIndex !== index) {
                    return step;
                }
                return {
                    ...step,data
                }
            })
        }))
    }
    return (
        <React.Fragment>

            <div className={classes.root}>
                <Stepper activeStep={activeStep} alternativeLabel>
                    {state.steps.map((label) => (
                        <Step key={label.name}>
                            <StepLabel>{label.name}</StepLabel>
                        </Step>
                    ))}
                </Stepper>
                <div>
                    {activeStep === state.steps.length ? (
                        <div>
                            <Typography className={classes.instructions}>All steps completed</Typography>
                            <Button onClick={handleReset}>Reset</Button>
                        </div>
                    ) : (
                            <div>
                                <div className={classes.instructions}>
                                    {getStepContent(activeStep,handleNext )}
                                </div>
                                <div>
                                    <Button
                                        disabled={activeStep === 0}
                                        onClick={handleBack}
                                        className={classes.backButton}
                                    >
                                        Back
                                    </Button>
                                    <Button variant="contained" color="primary" onClick={handleNext}>
                                        {activeStep === state.steps.length - 1 ? 'Finish' : 'Next'}
                                    </Button>
                                </div>
                            </div>
                        )}
                </div>
            </div>


        </React.Fragment>
    );
};

export default IobdCampCreate;

这是一个step1.js形式

import React from 'react';
import { Formik } from 'formik';

const FormStep1 = (props) => (

    <div>
        <h3>Form A</h3>
        <Formik
            initialValues={{ email: '',password: '' }}
            validate={values => {
                const errors = {};
                if (!values.email) {
                    errors.email = 'required';
                } else if (
                    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
                ) {
                    errors.email = 'Invalid email address';
                }
                return errors;
            }}
            onSubmit={(values) => {
                props.onSubmit(0,values);
            }}
        >
            {({
                values,errors,touched,handleChange,handleBlur,handleSubmit,isSubmitting,/* and other goodies */
            }) => (
                    <form onSubmit={handleSubmit}>
                        <input
                            type="email"
                            name="email"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.email}
                        />
                        {errors.email && touched.email && errors.email}
                        <input
                            type="password"
                            name="password"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.password}
                        />
                        {errors.password && touched.password && errors.password}
                                                
                        <button variant="contained" color="primary" type="submit" >
                            Next
                        </button>
                    </form>
                )}
        </Formik>
    </div>
);

export default FormStep1;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）