</> Controller
: 组件
React Hook Form 拥抱不受控组件和原生输入,但是很难避免使用外部受控组件,例如 React-Select、AntD 和 MUI。这个包装组件将使您更容易与它们一起使用。
属性
下表包含有关 Controller
参数的信息。
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
name | FieldPath | ✓ | 输入的唯一名称。 |
control | Control | control 对象来自调用 useForm 。使用 FormProvider 时可选。 | |
render | 函数 | 这是一个 render prop。一个返回 React 元素并提供将事件和值附加到组件的能力的函数。这简化了与具有非标准 prop 名称的外部受控组件的集成。为子组件提供 onChange 、onBlur 、name 、ref 和 value ,以及一个包含特定输入状态的 fieldState 对象。 | |
defaultValue | unknown | 重要:不能将 undefined 应用于 defaultValue 或 useForm 中的 defaultValues 。
| |
rules | 对象 | 与 register 选项相同的格式的验证规则,包括required、min、max、minLength、maxLength、pattern、validate | |
shouldUnregister | boolean = false` | 输入将在卸载后被取消注册,默认值也将被删除。 注意:使用 useFieldArray 时应避免此属性,因为 unregister 函数在输入卸载/重新安装和重新排序后被调用。 | |
disabled | boolean = false` | disabled 属性将从 field 属性返回。受控输入将被禁用,其值将从提交数据中省略。 |
返回
下表包含有关 Controller
生成的属性的信息。
对象名称 | 名称 | 类型 | 描述 |
---|---|---|---|
field | onChange | (value: any) => void | 一个将输入的值发送到库的函数。 它应该分配给输入的 onChange 属性,并且值不应为 undefined 。 此属性更新 formState,您应该避免手动调用 setValue 或其他与字段更新相关的 API。 |
field | onBlur | () => void | 一个将输入的 onBlur 事件发送到库的函数。它应该分配给输入的 onBlur 属性。 |
field | value | unknown | 受控组件的当前值。 |
field | disabled | boolean | 输入的禁用状态。 |
field | name | string | 正在注册的输入名称。 |
field | ref | React.ref | 用于将钩子形式连接到输入的 ref。将 ref 分配给组件的输入 ref 以允许钩子形式聚焦错误输入。 |
fieldState | invalid | boolean | 当前输入的无效状态。 |
fieldState | isTouched | boolean | 当前受控输入的触碰状态。 |
fieldState | isDirty | boolean | 当前受控输入的脏污状态。 |
fieldState | error | object | 此特定输入的错误。 |
formState | isDirty | boolean | 用户修改任何输入后设置为 true 。
|
formState | dirtyFields | object | 一个包含用户修改的字段的对象。确保通过 useForm 提供所有输入的 defaultValues,以便库可以与 defaultValues 进行比较。
|
formState | touchedFields | object | 一个包含用户交互过的所有输入的对象。 |
formState | defaultValues | object | 在 useForm 的 defaultValues 中设置的值或通过 reset API 更新的默认值。 |
formState | isSubmitted | boolean | 表单提交后设置为 true 。在调用 reset 方法之前将保持 true 。 |
formState | isSubmitSuccessful | boolean | 表示表单成功提交,没有任何运行时错误。 |
formState | isSubmitting | boolean | 如果表单当前正在提交,则为 true 。否则为 false 。 |
formState | isLoading | boolean | 如果表单当前正在加载异步默认值,则为 true 。重要:此属性仅适用于异步 defaultValues |
formState | submitCount | number | 表单提交的次数。 |
formState | isValid | boolean | 如果表单没有错误,则设置为 true 。setError 对 isValid formState 没有影响,isValid 将始终通过整个表单验证结果得出。 |
formState | isValidating | boolean | 在验证期间设置为 true 。 |
formState | errors | object | 一个包含字段错误的对象。还有一个 ErrorMessage 组件可以轻松检索错误消息。 |
示例
网页
import ReactDatePicker from "react-datepicker"import { TextField } from "@material-ui/core"import { useForm, Controller } from "react-hook-form"type FormValues = {ReactDatepicker: string}function App() {const { handleSubmit, control } = useForm<FormValues>()return (<form onSubmit={handleSubmit((data) => console.log(data))}><Controllercontrol={control}name="ReactDatepicker"render={({ field: { onChange, onBlur, value, ref } }) => (<ReactDatePickeronChange={onChange} // send value to hook formonBlur={onBlur} // notify when input is touched/blurselected={value}/>)}/><input type="submit" /></form>)}
React Native
import { Text, View, TextInput, Button, Alert } from "react-native"import { useForm, Controller } from "react-hook-form"export default function App() {const {control,handleSubmit,formState: { errors },} = useForm({defaultValues: {firstName: "",lastName: "",},})const onSubmit = (data) => console.log(data)return (<View><Controllercontrol={control}rules={{required: true,}}render={({ field: { onChange, onBlur, value } }) => (<TextInputplaceholder="First name"onBlur={onBlur}onChangeText={onChange}value={value}/>)}name="firstName"/>{errors.firstName && <Text>This is required.</Text>}<Controllercontrol={control}rules={{maxLength: 100,}}render={({ field: { onChange, onBlur, value } }) => (<TextInputplaceholder="Last name"onBlur={onBlur}onChangeText={onChange}value={value}/>)}name="lastName"/><Button title="Submit" onPress={handleSubmit(onSubmit)} /></View>)}
视频
以下视频展示了 Controller 内部的内容以及它是如何构建的。
提示
-
在使用外部受控组件(如 MUI、AntD、Chakra UI)时,了解每个属性的职责非常重要。Controller 充当输入的“间谍”,通过报告和设置值来进行监视。
- onChange:将数据发回钩子形式
- onBlur:报告输入已被交互(聚焦和模糊)
- value:设置输入的初始值和更新后的值
- ref:允许使用错误聚焦输入
- name:为输入提供一个唯一的名称 以下代码沙箱演示了用法
- MUI 和其他组件
- Chakra UI 组件
-
请勿再次
注册
输入。此组件旨在负责注册过程。<Controllername="test"render={({ field }) => {// return <input {...field} {...register('test')} />; ❌ double up the registrationreturn <input {...field} /> // ✅}}/> -
通过在
onChange
期间转换值来自定义发送到挂钩表单的值。<Controllername="test"render={({ field }) => {// sending integer instead of string.return (<input{...field}onChange={(e) => field.onChange(parseInt(e.target.value))}/>)}}/>
感谢您的支持
如果您发现 React Hook Form 对您的项目有用,请考虑为其加星并支持它。