提问人:Watermamal 提问时间:10/27/2023 更新时间:10/27/2023 访问量:21
如何使用 React-hook-form 控制器重新验证 Joi.ref()?
How to revalidate Joi.ref() with React-hook-form Controller?
问:
我有 2 个控制器,一个用于开始日期,另一个用于结束日期,每个控制器有 2 个输入,一个用于月份,一个用于年份。
结束日期需要始终高于开始日期,我正在使用 Joi 来验证这一点。
问题是 react-hook-form 只对结束日期的 onBlur 效果运行验证,而不是对开始日期的 onChange 或 onBlur 运行验证。min(Joi.ref("startDate"))
schema = Joi.object({
startDate: Joi.date()
.raw()
.format("YYYY-MM-DD")
.less("now")
.greater("1920-1-1"),
endDate: Joi.date()
.raw()
.format("YYYY-MM-DD")
.less("now")
.min(Joi.ref("startDate"))
.allow(null)
});
const MonthYearInput = ({ name, checkbox }) => {
const { control } = useFormContext();
const monthRef = useRef();
const yearRef = useRef();
const getOptions = (list) => {
if (!list) return null;
const options = list.map((item) => {
return (
<option value={item.id} key={item.id}>
{item.name}
</option>
);
});
return options;
};
const getDate = () => {
const year = yearRef.current.value;
const month = monthRef.current.value;
const formattedMonth = month < 10 ? `0${month}` : month;
return `${year}-${formattedMonth}-01`;
};
return (
<>
<Controller
control={control}
name={name}
defaultValue=""
render={({ field, fieldState: { error } }) => {
return (
<>
<select
className={"form-select"}
onChange={(e) => {
field.onChange(getDate());
}}
onBlur={field.onBlur}
ref={monthRef}
name={`${name}month`}
defaultValue=""
>
<option key="0" value="" disabled>
Month
</option>
{getOptions(months)}
</select>
<input
name={`${name}year`}
type="number"
step={1}
onChange={(e) => {
field.onChange(getDate());
}}
onBlur={field.onBlur}
ref={yearRef}
placeholder="Year"
/>
{error?.message && <div>{error?.message}</div>}
</>
);
}}
/>
</>
);
};
上一个:如何验证值之间的关系
评论