0

我制作了一个 formik 表单，但似乎无法记录 onSubmit 的值。

function getSteps() {
  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}


const { formId, formField } = FormModel;

function getStepContent(step) {
  switch (step) {
    case 0:
      return <PersonalInfo formField={formField} />;
    case 1:
      return 'nothing yet.';
    case 2:
      return `nothing here too.`;
    default:
      return 'Unknown step';
  }
}

export default function VerticalLinearStepper() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = useState(0);
  const currentValidationSchema = validationSchema[activeStep];
  const steps = getSteps();
  const isLastStep = activeStep === steps.length - 1;


  function _sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async function _submitForm(values, actions) {
    await _sleep(3000);
    console.log(values); //# ====> SAYS VALUES IS NOT DEFINE

    setActiveStep((prevStep) => prevStep + 1);
  }

  const handleNext = (values, actions) => {
    if (isLastStep) {
      _submitForm(values, actions); //# ====> SAYS VALUES IS NOT DEFINE
    } else {
      setActiveStep((prevStep) => prevStep + 1);
      // actions.setTouched({}); //# ====> SAYS ACTIONS IS NOT DEFINE
      // actions.setSubmitting(false); //# ====> SAYS ACTIONS IS NOT DEFINE
    }
  };

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

  return (
    <div className={classes.root}>
      <Stepper activeStep={activeStep} orientation="vertical">
        {steps.map((label, index) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
            <StepContent>
              <Formik
                initialValues={InitialValues}
                validationSchema={currentValidationSchema}
                onSubmit={handleNext}
              >
              {({ isSubmitting }) => (
                <Form id={formId} >
                  {getStepContent(index)}
                  <div className={classes.actionsContainer}>
                    <div>
                      <Button
                        disabled={activeStep === 0}
                        className={classes.button}
                        variant="contained"
                        disabled={isSubmitting}
                        onClick={handleBack}
                      >
                        Back
                      </Button>
                      <Button
                        variant="contained"
                        color="primary"
                        // type={isLastStep + 1 ? 'submit' : 'button'}
                        onClick={handleNext}
                      >
                        {isLastStep ? 'Finish' : 'Next'}
                      </Button>
                      {isSubmitting && (
                        <CircularProgress
                          size={24}
                        />
                      )}
                    </div>
                  </div>
                </Form>
              )} 
              </Formik>
            </StepContent>
          </Step>
        ))}
      </Stepper>
      {activeStep === steps.length && (
        <Paper square elevation={0} className={classes.resetContainer}>
          <SuccessPage />
        </Paper>
      )}
    </div>
  );
}

我正在关注Medium上的教程，但我似乎无法弄清楚 VALUES & ACTIONS 道具的来源，因为它们实际上并没有出现。所以我尝试了很多解决方案，包括

<Formik
   initialValues={InitialValues}
   onSubmit={(values, actions) => {
     setTimeout(() => {
       alert(JSON.stringify(values, null, 2));
       actions.setSubmitting(false);
     }, 1000);
   }}
 >
   .....
</Formik>

但即使只打印 InitialValues，我也有点迷茫，任何帮助都将不胜感激。

4

0 回答 0