Formik OnSubmit 未触发

Question

我正在开发一个 React 项目，并且使用 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>

此外，我正在使用 Semantic UI React 进行样式设计。

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

Answer 2

我遇到了这个问题，结果是是的，验证检查失败了。我只是从对象的一些属性中删除了

.required()

以使其正常工作。

Answer 3

我遇到了一个问题，Formik 表单中的提交按钮没有触发表单提交。问题是该元素被放置在 MUI 之外，导致 type="submit" 的按钮无法被识别。

解决方案：将元素移动到 MUI 内，使其包裹 和 。这可确保提交按钮被正确识别为表单的一部分。