如何访问Yup模式中的上下文

Question

我使用react-hook-form和Yup库来管理我的应用程序中的表单。

我正在尝试根据我的组件状态创建动态Yup模式。

例如：

import React, { useContext } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { FirstFormContext } from "../context/FirstFormContext";
import { SecondFormContext } from "../context/SecondFormContext";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object().shape({
email: yup.string().email().min(2), // <-- Here I want to access the value
address: yup.string().min(2).max(20)
});
const SecondForm = () => {
const { secondFormData, setSecondFormData } = useContext(SecondFormContext);
const { firstFormData } = useContext(FirstFormContext);
const { register, handleSubmit } = useForm({
resolver: yupResolver(schema),
context: firstFormData.type // <---- Passing the variable
});
const history = useHistory();
const onSubmit = (data) => {
setSecondFormData(data);
history.push("/end-page");
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<button
style={{ display: "block", marginBottom: "20px" }}
onClick={() => history.push("/")}
>
Go back
</button>
{firstFormData.type === "one" ? (
<input
defaultValue={secondFormData.email}
placeholder="email"
{...register("email", { required: true })}
/>
) : firstFormData.type === "two" ? (
<input
defaultValue={secondFormData.address}
placeholder="address"
{...register("address", { required: true })}
/>
) : null}
<button type="submit" style={{ display: "block", marginTop: "20px" }}>
Next
</button>
</form>
);
};
export default SecondForm;

正如您所看到的，在我的组件中，我将上下文传递给useForm钩子，并且我希望在SecondForm组件上方的Yup模式中访问它。

我怎样才能做到这一点？

谢谢。

Answer 1

我是这样解决的：

内部useForm挂钩

const { register, handleSubmit } = useForm({
resolver: yupResolver(schema),
context: { type: firstFormData.type }
});

在我的schema:中

const schema = yup.object().shape({
email: yup
.string()
.email()
.min(2)
.when("$type", (type, schema) => {
console.log(type);
if (type === "one") {
return schema.required();
}
return;
}),
address: yup.string().min(2).max(20)
});