使用 Formik 未成功触发 handleSubmit 函数答案

【问题标题】：handleSubmit function not successfully firing using Formik使用 Formik 未成功触发 handleSubmit 函数
【发布时间】：2019-05-30 17:15:32
【问题描述】：

我正在使用 Formik + Yup 构建一个表单，但似乎无法通过一个基本问题，我觉得我错过了一些明显的东西。我的 handleSubmit 函数不会在按钮单击时触发——即使是简单的控制台日志。如果我向 onClick 按钮处理程序添加一个纯函数，它会触发，但 Formik 似乎没有传递我用 withFormik HOC 构造的 handleSubmit。

我已尝试将处理程序添加到表单组件，但在那里也不起作用。

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    firstName: props.firstName || '',
    ...
  }),
  validationSchema: yup.object().shape({
    firstName: yup.string().required('Please enter your first name'),
   ...
  }),
  handleSubmit: (values, formikBag) => {
    console.log('test');
    }
  },
});

const BusinessFundingForm = ({
  values,
  isSubmitting,
  errors,
  handleBlur,
  handleChange,
  handleSubmit,
  touched,
  data,
}) => {

  return (
        <Form className="form" id="form-id">
          <Row>
            <Col xs={12} sm={6}>
              <InputField
                id="first-name"
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="First Name"
                label="First Name"
              />
              {errors.firstName &&
                touched.firstName && <Error>{errors.firstName}</Error>}
            </Col>
           ...
          </Row>

          <Row>
            <ButtonWrapper>
              <Button
                type="submit"
                tall
                onClick={handleSubmit}
                varianttype={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                    ? 'disabled'
                    : 'outline'
                }
                disabled={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                }
                text="Submit →"
              />
            </ButtonWrapper>
          </Row>
        </Form>
      </FormGrid>
    </Element>
  );
};

export default formikEnhancer(BusinessFundingForm);

为简洁起见，我删除了除 firstName 属性之外的所有属性

【问题讨论】：

有时页面上有errors会阻止Formik触发handleSubmit，因此可以通过在屏幕或控制台上输出errors来检查是否有错误。我也相信你的代码没有语法错误，因为你的 handleSubmit 似乎有额外的右括号。
@Vencovsky formikEnhancer 是OP的自定义函数，它使用withFormik
@Rikin ops，我的错误
@Rikin 哦，伙计，非常感谢。我记录了错误，我意识到我正在检查表单中不存在的字段的错误。我猜复制/粘贴的危险。再次感谢！
@geeberry 我会将其发布为未来读者的答案，因为这是一个非常常见的问题，如果你愿意，你可以接受。

标签： reactjs formik yup

【解决方案1】：

有时页面上有错误会阻止 Formik 触发handleSubmit，因此可以通过在屏幕或控制台上输出错误来检查是否没有错误。

要在开发过程中克服这些类型的场景，您始终可以使用： <pre>{JSON.stringify(errors, null, 2)}</pre> 作为一个 DOM 节点，这样您就可以不断地了解 UI 上的问题，然后在提交到您的分支时将其删除或评论。

我也相信你的代码没有语法错误，因为你的 handleSubmit 似乎有额外的右括号。

【讨论】：