Formik onSubmit 函数不适用于我的代码

Question

我正在使用react和formik创建一个表单。下面是我的代码：

<div>
  <Formik
    initialValues={{
      email: ""
    }}
    onSubmit={(values: FState, setSubmitting: any) => {
      console.log("Enter in submit function", values);
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 500);
    }}
    validationSchema={validationSchemaGlobal}
  >
    {({
      errors,
      touched,
      handleBlur,
      handleChange,
      isSubmitting,
      values,
      handleSubmit
    }: any) => (
      <div>
        <Cards>
          <form onSubmit={handleSubmit}>
            <CardBody>
              <h4>
                Enter Your Email Address and we'll send you a link to reset your
                password
              </h4>
              <Field
                type="text"
                id="email"
                value={values.email}
                component={CustomInput}
                onChange={handleChange}
                onBlur={handleBlur}
              />
              {errors.email && touched.email ? (
                <div style={{ color: "red" }}>{errors.email}</div>
              ) : null}
            </CardBody>
            <CardFooter>
              <br />
              <button type="submit" disabled={isSubmitting}>
                Send Password Reset Link
                {/* {isSubmitting && <i className="fa fa-sponner fa-spin"/>} */}
              </button>
            </CardFooter>
          </form>
        </Cards>
      </div>
    )}
  </Formik>
</div>

在此 formik 表单中，onSubmit 函数不起作用。我不知道为什么？请告诉我我的代码有什么问题吗？

Answer 1

检查您的

validationSchema

。我遇到了这个问题，发现我的验证器返回了一些东西，向 Formik 发出表单无效的信号，但没有出现其他警告或消息。它就是不提交。

将该道具替换为

validator={() => ({})}

，即仅返回一个空对象。这应该通过验证并触发您的 onSubmit。您可以从那里恢复您的功能。

  <Formik
    initialValues={{
      email: ""
    }}
    onSubmit={() => { console.log("submit!"); }}
    validator={() => ({})}
  >
    {/* */}
  </Formik>

Answer 2

在我的例子中，我使用

Yup

作为验证器，并且我不小心在我的

firstName

中按要求添加了

lastName

和

validationSchema

，但我的表单中没有这些值。

我的

validationSchema

是，

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
  password: Yup.string()
    .min(6, 'Password must be at least 6 characters')
    .max(24, 'Password can be maximum 24 characters')
    .required('Required')
})

我刚刚删除了

firstName

和

lastName

，

const SignupSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
  password: Yup.string()
    .min(6, 'Password must be at least 6 characters')
    .max(24, 'Password can be maximum 24 characters')
    .required('Required')
})

因此，请检查您的

validationSchema

，看看您是否需要表单中不存在的内容。

Answer 3

我从

Form

而不是

react-bootstrap

导入了

formik

，所以我遇到了这个问题。通过导入

Form

的

formik

解决了该问题。有时，直接使用react-bootstrap的

Form.Control

而不是formik的

Field

也会出现这个问题。

如果你真的必须使用

Form.Control

，你可以使用

render

道具。

Answer 4

就我而言，onSubmit不起作用，因为我忘记将表单包装在

<form></form>

标签中。这是一个愚蠢的问题，但这可能是这种行为的原因。如果上述解决方案不起作用，请检查您是否有 form 标签。

Answer 5

最初的问题有点晚了，但我遇到了同样的问题，并且解决它很容易，但很难找到。

当我将“name”属性传递给组件时，我写了“DateOfBirth”而不是小写，这意味着它与我的validationSchema不匹配。

我的架构如下所示：

export const userSchema = yup.object().shape({
firstName: yup.string().min(1).max(50).required('Field is required'), 
lastName: yup.string().min(1).max(50).required('Field is required'), 
dateOfBirth: yup.date().required('Invalid input'),});

这意味着组件的名称必须匹配

之前（不起作用）：

 <DateTimePicker name="DateOfBirth" label="Date of birth" />

之后（工作）：

<DateTimePicker name="dateOfBirth" label="Date of birth" />

Answer 6

就我而言，我错误地将

validationSchema

传递给了错误的道具。

错误：

  <Formik
    initialValues={initialValues}
    validate={validationSchema} <----- Error
  >

正确做法：

  <Formik
    initialValues={initialValues}
    validationSchema={validationSchema} <----- Good
  >

Answer 7

致那些面临错误的人们：

确保initialValue Objkeys与Yup验证模式匹配

Answer 8

我提到了我处理的另一种可能性。更改按钮类型并添加 onClick 像这样

<Button type="button" onClick={submitForm}>

还在顶部添加 SubmitForm 属性以及值、触摸等

 {({ submitForm, errors, handleChange, handleSubmit, touched, values }) => (

现在可以工作了

Answer 9

发生这种情况可能是因为表单正在提交但它无效，这可能是因为验证架构由于多种原因与您的表单不匹配，

在我的例子中，这是因为有一个字符串，并且它被作为 null 发送，所以我只是将

.nullable()

添加到该字段的验证模式中。

Answer 10

我的validationSchema中有额外的字段，它是用Yup声明的。然而该字段没有在 Formik 中声明，因此它不起作用。从validationSchema中删除该字段后，它就可以工作了。

Answer 11

我也遇到了同样的问题。我的 onSubmit 函数没有执行 onClick 提交按钮。

问题出在 Yup.validation 模式中。有一个额外的字段我没有使用。我删除了那个字段和繁荣。

Answer 12

发布此内容是因为我遇到了相同的问题，而且问题甚至不同：

我的验证函数返回一个

errors

对象，该对象始终包含所有字段，当它们正确时，所有字段都带有空字符串。

当

errors

对象不为空时，表单提交似乎被禁用。

Answer 13

就我而言，问题是 Button 组件位于 Formik 组件之外

<Formik initialValues={} validate={validate} onSubmit={handleSubmit}>
   <Form>      
   </Form>
</Formik>
<Button type="submit">Submit</Button>

将按钮移动到表单内解决了我的问题

<Formik initialValues={} validate={validate} onSubmit={handleSubmit}>
   <Form>      
        <Button type="submit">Submit</Button>
   </Form>
</Formik>

Answer 14

我的错误是我没有在验证时用空白初始化错误

 const errors:any={};

这是登录表单的完整代码，请检查验证功能

    <Formik
     initialValues={{ email: "", password: "" }}
     validate={(formValues) => {
         const errors:any={};
         if (!formValues.email) {
             errors.email = "Invalid email";
         }
         if (!formValues.password) {
             errors.password = "Password is required";
         }
         return errors;

     }}
     onSubmit={async (values) => {
         console.log("submit", values);
         dispatch(login({ username: values.email, password: values.password }));
         if (loginState.isError) {
             alert(loginState.message);
         }
     }}
 >{({ values, handleChange, errors, dirty, isValid, isSubmitting, handleSubmit, setFieldValue, setFieldTouched, setFieldError }) => (
     <Form onSubmit={handleSubmit}>
         <FormGroup>
             <Label>Email</Label>
             <Input type="email" name="email" valid={!isEmpty(errors.email)} value={values.email} onChange={handleChange}></Input>
             <FormFeedback className="font-weight-bold" type="invalid" role="alert"> {errors.email}</FormFeedback>
         </FormGroup>
         <FormGroup>
             <Label>Password</Label>
             <Input type="password" name="password" value={values.password} valid={!isEmpty(errors.password)} onChange={handleChange}></Input>
             <FormFeedback className="font-weight-bold" type="invalid" role="alert"> {errors.password}</FormFeedback>

         </FormGroup>
         <FormGroup className="text-center">
         <p> {isValid === true ? "is valid" : "not valid"} </p>
             <Button type="submit" color="primary" className="mt-3">Login</Button>
         </FormGroup>
     </Form>
 )}
 </Formik>

Answer 15

我解决了这个问题，因为我声明了 onsubmit 函数而没有 const 字（我知道这很愚蠢）

Answer 16

您还可以在返回表单的 JSX 之前打印出错误，这应该可以帮助您找出问题所在。这对我有用：

<div>
  <Formik
    initialValues={{
      email: ""
    }}
    onSubmit={(values: FState, setSubmitting: any) => {
      console.log("Enter in submit function", values);
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 500);
    }}
    validationSchema={validationSchemaGlobal}
  >
    {({
      errors,
      touched,
      handleBlur,
      handleChange,
      isSubmitting,
      values,
      handleSubmit
    }: any) => {
      
      // ADD THIS
      console.log(errors)

      return (<div>
        ... your form here
      </div>)
    }}
  </Formik>
</div>

Answer 17

我错误地使用了 React 中的

Answer 18

-5
投票

使用而不是按钮标签，因为我为我工作。

Formik onSubmit 函数不适用于我的代码

问题描述投票：0回答：18

18个回答

最新问题

Formik onSubmit 函数不适用于我的代码

问题描述 投票：0回答：18

18个回答

最新问题

问题描述投票：0回答：18