Formik OnSubmit 未被触发

Question

我正在做一个反应项目，我正在使用 Formik 作为表单。由于某种原因，onSubmit 方法没有被触发。我一直在试图找出错误所在，但我找不到。

我在另一个组件上进行了几乎相似的设置，并且工作正常。感谢任何帮助。

验证没有问题，因为按钮只有在满足验证参数时才会启用。我单击提交按钮，但没有任何反应。我试过调试，但它甚至没有命中 onSubmit 方法。

<Segment>
        <Formik
          initialValues={{
            comments: "",
            mk1: "",
            mk2: "",
            mk3: "",
            mk4: "",
            mk1Num: 0,
            mk2Num: 0,
            mk3Num: 0,
            mk4Num: 0,
          }}
          validationSchema={Yup.object({
            comments: Yup.string().required(),
            mk1: Yup.string().required(),
            mk2: Yup.string().required(),
            mk3: Yup.string().required(),
            mk4: Yup.string().required(),
            mk1Num: Yup.number().positive().max(5),
            mk2Num: Yup.number().positive().max(5),
            mk3Num: Yup.number().positive().max(5),
            mk4Num: Yup.number().positive().max(5),
          })}
          onSubmit={async (values, { setErrors, setSubmitting }) => {
            try {
              console.log(values);
              const totalGrade =
                values.mk1Num + values.mk2Num + values.mk3Num + values.mk4Num;
              await addToSubmittedAssignment(
                courseId,
                assignmentId,
                values,
                totalGrade
              );
              setSubmitting(false);
            } catch (error) {
              setErrors({ err: error.message });
            }
          }}
        >
          {({ isSubmitting, isValid, dirty, errors, values }) => (
            <Form className='ui form'>
              <TextArea
                name='comments'
                placeholder='Enter Comments Here'
                rows={10}
              />
              <Grid>
                <Grid.Column width={14}>
                  <TextInput name='mk1' placeholder='Enter Marking Key 1' />
                  <TextInput name='mk2' placeholder='Enter Marking Key 2' />
                  <TextInput name='mk3' placeholder='Enter Marking Key 3' />
                  <TextInput name='mk4' placeholder='Enter Marking Key 4' />
                </Grid.Column>
                <Grid.Column width={2}>
                  <TextInput name='mk1Num' type='number' />
                  <TextInput name='mk2Num' type='number' />
                  <TextInput name='mk3Num' type='number' />
                  <TextInput name='mk4Num' type='number' />
                </Grid.Column>
              </Grid>

              {errors.err && (
                <Label
                  basic
                  color='red'
                  style={{ marginBottom: 10 }}
                  content={errors.err}
                />
              )}
              <br />
              <Button
                loading={isSubmitting}
                disabled={!isValid || !dirty || isSubmitting}
                type='submit'
                fluidsize='large'
                color='teal'
                content='Submit'
              />
            </Form>
          )}
        </Formik>
      </Segment>

此外，我正在使用语义 UI 对样式做出反应。

Answer 1

尝试将提交方法添加到表单渲染参数：

{({ isSubmitting, submitForm, isValid, dirty, errors, values }) => (...

然后在提交按钮上调用它：

<Button
  loading={isSubmitting}
  disabled={!isValid || !dirty || isSubmitting}
  type='submit'
  fluidsize='large'
  color='teal'
  content='Submit'
  onClick={submitForm}
/>

Formik OnSubmit 未被触发

Formik OnSubmit Not Getting Triggered

javascript

reactjs

formik