React Hook Form

  • 是什么?
    • 基于 Hook 的轻量级表单组件 - 5KB
  • 接口
  • 注意 ⚠️
    • 默认 mode 为 onSubmit - 也就是在提交的时候才会校验
    • 元素上的 required 会由浏览器处理,而不会添加到 rhf 的规则里
  • 默认通过 ref 的方式进行注册
    • 获取 name, type, value
    • 在设置 ref 时候就会初始化进行注册
    • 会判断是否为 checkbox 和 radio - 使用 checked
    • 如果是 html 元素 ref - 会添加事件监听
  • Controller - 基于 useController 实现的自定义控件封装
    • 处理没有 ref 进行注册的场景
    • 核心逻辑在 useController
    • Controller 只包含基础渲染逻辑 - 渲染 as 或者使用 render 函数渲染
  • useController - 提供自定义组件所需的上下文
    • 提供 onChange, onBlur, name, value, ref,
    • 提供元数据 invalid, isDirty, isTouched
tip
  • 能使用 ref 尽量使用 ref 注册
const MyForm: React.FC<{ onSubmit; defaultValue }> = ({ onSubmit, defaultValue }) => {
const formMethods = useForm({ mode: 'onBlur', defaultValues: defaultValue });
const { register, handleSubmit } = formMethods;
return (
<FormProvider {...formMethods}>
<form onSubmit={handleSubmit(onSubmit)}>
<input name="name" ref={register} />
<input name="age" type="number" ref={register} />
<button type="submit">Submit</button>
</form>
</FormProvider>
);
};