如何使用 React-hook-form 控制器重新验证 Joi.ref()?

How to revalidate Joi.ref() with React-hook-form Controller?

提问人:Watermamal 提问时间:10/27/2023 更新时间:10/27/2023 访问量:21

问:

我有 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>}
            </>
          );
        }}
      />
    </>
  );
};

Edit festive-curran-qs8svg

reactjs 验证 react-hook-form joi

评论


答:

0赞 Watermamal 10/27/2023 #1

通过添加到事件来解决,以便手动重新验证。trigger("endDate")onChange

Edit festive-curran-qs8svg