使用Formik结合Yup做表单校验时无法在控制台打印表单值怎么办

问题原因 #

你的代码存在3处问题导致提交时无法触发onSubmit回调打印表单值：

• 姓名输入框的type属性拼写错误，写成了typr="text"，可能导致输入值无法正常同步到Formik状态
• 爱好复选框是多选场景，Formik会自动把同name的多选值存为数组，但你的yup校验规则中将checked字段定义为字符串类型，校验一直失败，Formik默认校验不通过不会执行onSubmit逻辑
• 如果你需要用户必须勾选同意条款的复选框，当前校验规则中没有包含checkBox字段的校验逻辑，若有必填要求也需要补充

修复方案 #

按如下内容修改你的代码即可：

1. 修正姓名输入框的属性拼写

<Field
  type="text" // 把原来的typr改成type
  id="name"
  name="name"
  placeholder="Enter your name"
/>

2. 修改yup校验规则，适配多选爱好和条款勾选的校验

const validationSchema = yup.object({
  name: yup.string().required("Please Enter your name"),
  password: yup.string().required("password is required"),
  mydesc: yup.string().required("Please Enter the description"),
  email: yup.string().required("Please Enter your email"),
  title: yup.string().required("Please Enter the Title"),
  gender: yup.string().required("Gender is required"),
  // 把checked字段的校验从string改成array，要求最少选1项
  checked: yup.array().min(1, "Select at least one hobby").required("Select your Hobbie"),
  // 如果条款勾选是必填，补充这行校验，要求值必须为true
  checkBox: yup.boolean().oneOf([true], "Please accept the terms").required("Terms acceptance is required")
});

3. 修改初始值，适配数组和布尔类型的字段

initialValues={{
  name: "",
  password: "",
  mydesc: "",
  email: "",
  title: "",
  gender: "",
  checked: [], // 多选字段默认值设为空数组
  checkBox: false, // 布尔类型复选框默认值设为false
}}

修改完成后所有字段校验通过即可触发onSubmit，控制台就能正常打印所有字段的取值。

内容的提问来源于stack exchange，提问作者jaydeep bhattacharya