reactjs - 为什么我的 Formik 表单没有显示警告信息？反应，福米克

Question

我正在尝试使用 Formik 完成一些基本的前端表单验证。我已经验证了用户，但错误消息没有显示在我的前端。

如果我的表单不符合我的验证模式，我希望显示一条错误消息。

我的验证模式：

import * as yup from 'yup';

export const userSignUpSchema = yup.object().shape({
  name: yup
    .string()
    .min(4, "Too short")
    .max(20, "Too long")
    .required("Required"),
  email: yup
    .string()
    .email("Invalid email")
    .required("Required"),
  password: yup
    .string()
    .min(4, "Too short")
    .max(20, "Too long")
    .required("Required"),
  confirmPassword: yup
    .string()
    .min(4, "Too short")
    .max(20, "Too long")
    .required("Required")
});

我的注册组件

<Formik
  initialValues={{
    name: '',
    email: '',
    password: ''
  }}
  validationSchema={userSignUpSchema}
  onSubmit={createUser}
>
  <Form className="form">
    <label>Display Name</label>
    <Field name="name" type="text" onChange={
      (e) => {setUsernameReg(e.target.value);
    }} />
    <ErrorMessage
      name="name"
      component="div"
      className="invalid-feedback"
    />

    <label>Email Address</label>
    <Field name="email" type="email" onChange={
      (e) => {setEmailReg(e.target.value);
    }} />
    <ErrorMessage
      name="email"
      component="div"
      className="invalid-feedback"
    />

    <label>Password</label>
    <Field name="password" type="password" onChange={
      (e) => {setUsernameReg(e.target.value);
    }}/>
    <ErrorMessage
      name="password"
      component="div"
      className="invalid-feedback"
    />

    <button type="submit">Submit</button>
  </Form>
</Formik>

标签： reactjsformik