如何使用YUP验证（）方法在formik表单中动态显示/隐藏输入字段？

Question

我是初学者，并尝试使用yup验证在reactj中创建表单。我正在尝试使用具有名称的非常​​简单的表单，即LastName。而且，我尝试仅在

使用useformik挂钩

 const formik = useFormik({
        initialValues: {
            firstName: "",
            lastName: "",
            // email: ""
        }, 
        validationSchema: Yup.object({
            firstName : Yup.string().max(15,"Must be 15 chars or less").required("required"),
            lastName : Yup.string().when("firstName", {
                is:true,
                then: Yup.string().required("req")
            })
        }),
        onSubmit:(values) => {
            console.log(values)
        }
    })

yup验证验证一个名称并在提交func上

validationSchema: Yup.object({
            firstName : Yup.string().max(15,"Must be 15 chars or less").required("required"),
            lastName : Yup.string().when("firstName", {
                is:true,
                then: Yup.string().required("req")
            })
        }),
        onSubmit:(values) => {
            console.log(values)
        }
    })

验证我的实际表单时，我的实际表单

 <form onSubmit={formik.handleSubmit}> 
        <div className="input-container">
            <input
                id="firstName"
                name="firstName"
                type="text"
                placeholder="firstName"
                onChange={formik.handleChange}
                value={formik.values.firstName}
            />
             {formik.errors.firstName ? <p>{formik.errors.firstName}</p> : null}
        </div>
        <div className="input-container">
            <input
                id="lastName"
                name="lastName"
                type="text"
                placeholder="lastName"
                onChange={formik.handleChange}
                value={formik.values.lastName}
            />
           
        </div>
       
        <button type="submit">Submit</button>
    </form>

是否不确定是否应该hide/hide hide/hide lastname input字段以表单中的形式中，我已经在formik incorik inormik初始值中将其声明了目的。

Answer 1

这里有两件事要处理：

1. 看起来您只想需要lastName当firstName具有值时。如果该假设是正确的，则可以执行这样的操作：

...
Yup.object({
  firstName: Yup.string().max(15, "Must be 15 chars or less").required("required"),
  lastName: Yup.string().when("firstName", {
    is: (firstName) => !!firstName,
    then: Yup.string().required("req"),
  }),
)},
...

在上面的示例中，is ：（ firstName）=＆gt; !! firstName正在检查firstName是否具有值。如果仅在firstName为有效时才需要lastName，则可以将该行更改为is ：（ firstNname）=＆gt; firstName＆amp; amp; firstName.length＆lt; = 15，

2. 如果您只想在名字有效时显示姓氏输入，则应该有效：

<form onSubmit={formik.handleSubmit}>
  ...
  {!formik.errors.firstName ? (
    <div className="input-container">...</div>
  ) : null}
  ...
</form>

您也可以将其缩短一点，但是上述解决方案应起作用。缩短版本：

<form onSubmit={formik.handleSubmit}>
  ...
  {!formik.errors.firstName && (
    <div className="input-container">...</div>
  )}
  ...
</form>