跳到内容

控制器

受控输入的包装组件

</> Controller: 组件

React Hook Form 拥抱不受控组件和原生输入,但是很难避免使用外部受控组件,例如 React-SelectAntDMUI。这个包装组件将使您更容易与它们一起使用。

属性


下表包含有关 Controller 参数的信息。

名称类型必需描述
nameFieldPath输入的唯一名称。
controlControlcontrol 对象来自调用 useForm。使用 FormProvider 时可选。
render函数这是一个 render prop。一个返回 React 元素并提供将事件和值附加到组件的能力的函数。这简化了与具有非标准 prop 名称的外部受控组件的集成。为子组件提供 onChangeonBlurnamerefvalue,以及一个包含特定输入状态的 fieldState 对象。
defaultValueunknown重要:不能将 undefined 应用于 defaultValueuseForm 中的 defaultValues
  • 您需要在字段级别或 useFormdefaultValues 中设置 defaultValueundefined 不是有效值。
  • 如果您的表单将使用默认值调用 reset,您需要为 useForm 提供 defaultValues
  • 使用 undefined 调用 onChange 无效。您应该使用 null 或空字符串作为默认/清除值。
rules对象register 选项相同的格式的验证规则,包括

required、min、max、minLength、maxLength、pattern、validate
shouldUnregisterboolean = false`输入将在卸载后被取消注册,默认值也将被删除。

注意:使用 useFieldArray 时应避免此属性,因为 unregister 函数在输入卸载/重新安装和重新排序后被调用。
disabledboolean = false`disabled 属性将从 field 属性返回。受控输入将被禁用,其值将从提交数据中省略。

返回


下表包含有关 Controller 生成的属性的信息。

对象名称名称类型描述
fieldonChange(value: any) => void一个将输入的值发送到库的函数。

它应该分配给输入的 onChange 属性,并且值不应为 undefined
此属性更新 formState,您应该避免手动调用 setValue 或其他与字段更新相关的 API。
fieldonBlur() => void一个将输入的 onBlur 事件发送到库的函数。它应该分配给输入的 onBlur 属性。
fieldvalueunknown受控组件的当前值。
fielddisabledboolean输入的禁用状态。
fieldnamestring正在注册的输入名称。
fieldrefReact.ref用于将钩子形式连接到输入的 ref。将 ref 分配给组件的输入 ref 以允许钩子形式聚焦错误输入。
fieldStateinvalidboolean当前输入的无效状态。
fieldStateisTouchedboolean当前受控输入的触碰状态。
fieldStateisDirtyboolean当前受控输入的脏污状态。
fieldStateerrorobject此特定输入的错误。
formStateisDirtyboolean用户修改任何输入后设置为 true
  1. 重要:确保在 useForm 中提供所有输入的 defaultValues,以便钩子形式可以拥有一个比较表单是否脏污的单一事实来源。
  2. 文件类型的输入需要在应用程序级别进行管理,因为能够取消文件选择和 FileList 对象。
formStatedirtyFieldsobject一个包含用户修改的字段的对象。确保通过 useForm 提供所有输入的 defaultValues,以便库可以与 defaultValues 进行比较。
  1. 重要:确保在 useForm 中提供 defaultValues,以便钩子形式可以拥有一个比较每个字段脏污状态的单一事实来源。
  2. 脏污字段将不会表示为 isDirty formState,因为脏污字段是在字段级别而不是整个表单级别标记为脏污的。如果您想确定整个表单状态,请使用 isDirty
formStatetouchedFieldsobject一个包含用户交互过的所有输入的对象。
formStatedefaultValuesobjectuseForm 的 defaultValues 中设置的值或通过 reset API 更新的默认值。
formStateisSubmittedboolean表单提交后设置为 true。在调用 reset 方法之前将保持 true
formStateisSubmitSuccessfulboolean表示表单成功提交,没有任何运行时错误。
formStateisSubmittingboolean如果表单当前正在提交,则为 true。否则为 false
formStateisLoadingboolean如果表单当前正在加载异步默认值,则为 true
重要:此属性仅适用于异步 defaultValues
formStatesubmitCountnumber表单提交的次数。
formStateisValidboolean如果表单没有错误,则设置为 true

setErrorisValid formState 没有影响,isValid 将始终通过整个表单验证结果得出。
formStateisValidatingboolean在验证期间设置为 true
formStateerrorsobject一个包含字段错误的对象。还有一个 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))}>
<Controller
control={control}
name="ReactDatepicker"
render={({ field: { onChange, onBlur, value, ref } }) => (
<ReactDatePicker
onChange={onChange} // send value to hook form
onBlur={onBlur} // notify when input is touched/blur
selected={value}
/>
)}
/>
<input type="submit" />
</form>
)
}
import React from "react"
import ReactDatePicker from "react-datepicker"
import { TextField } from "@material-ui/core"
import { useForm, Controller } from "react-hook-form"
function App() {
const { handleSubmit, control } = useForm()
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<Controller
control={control}
name="ReactDatepicker"
render={({ field: { onChange, onBlur, value, ref } }) => (
<ReactDatePicker
onChange={onChange}
onBlur={onBlur}
selected={value}
/>
)}
/>
<input type="submit" />
</form>
)
}

React Native

Expo JS
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>
<Controller
control={control}
rules={{
required: true,
}}
render={({ field: { onChange, onBlur, value } }) => (
<TextInput
placeholder="First name"
onBlur={onBlur}
onChangeText={onChange}
value={value}
/>
)}
name="firstName"
/>
{errors.firstName && <Text>This is required.</Text>}
<Controller
control={control}
rules={{
maxLength: 100,
}}
render={({ field: { onChange, onBlur, value } }) => (
<TextInput
placeholder="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 组件
  • 请勿再次注册输入。此组件旨在负责注册过程。

    <Controller
    name="test"
    render={({ field }) => {
    // return <input {...field} {...register('test')} />; ❌ double up the registration
    return <input {...field} /> // ✅
    }}
    />
  • 通过在onChange期间转换值来自定义发送到挂钩表单的值。

    <Controller
    name="test"
    render={({ field }) => {
    // sending integer instead of string.
    return (
    <input
    {...field}
    onChange={(e) => field.onChange(parseInt(e.target.value))}
    />
    )
    }}
    />

感谢您的支持

如果您发现 React Hook Form 对您的项目有用,请考虑为其加星并支持它。