Skip to content

getValues

获取表单值

</> getValues: (payload?: string | string[]) => Object

用于读取表单值的优化助手。watchgetValues 的区别在于 getValues 不会触发重新渲染或订阅输入更改。

¥An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

属性

¥Props


类型描述
undefined返回整个表单值。
string获取表单值路径处的值。
array返回表单值路径处的值的数组。

示例:

¥Examples:


下面的示例显示了调用 getValues 方法时会发生什么。

¥The example below shows what to expect when you invoke getValues method.

<input {...register("root.test1")} />
<input {...register("root.test2")} />
名称输出
getValues(){ root: { test1: '', test2: ''} }
getValues("root"){ test1: '', test2: ''}
getValues("root.firstName")''
getValues(["yourDetails.lastName"])['']
RULES
  • 禁用的输入将返回为 undefined。如果你想阻止用户更新输入并仍然保留字段值,可以使用 readOnly 或禁用整个<fieldset />。这是 example

    ¥Disabled inputs will be returned as undefined. If you want to prevent users from updating the input and still retain the field value, you can use readOnly or disable the entire <fieldset />. Here is an example.

  • 它将在初始渲染之前从 useForm 返回 defaultValues

    ¥It will return defaultValues from useForm before the initial render.

示例:

¥Examples:


import React from "react"
import { useForm } from "react-hook-form"
type FormInputs = {
test: string
test1: string
}
export default function App() {
const { register, getValues } = useForm<FormInputs>()
return (
<form>
<input {...register("test")} />
<input {...register("test1")} />
<button
type="button"
onClick={() => {
const values = getValues() // { test: "test-input", test1: "test1-input" }
const singleValue = getValues("test") // "test-input"
const multipleValues = getValues(["test", "test1"]) // ["test-input", "test1-input"]
}}
>
Get Values
</button>
</form>
)
}
import { useForm } from "react-hook-form"
export default function App() {
const { register, getValues } = useForm()
return (
<form>
<input {...register("test")} />
<input {...register("test1")} />
<button
type="button"
onClick={() => {
const values = getValues() // { test: "test-input", test1: "test1-input" }
const singleValue = getValues("test") // "test-input"
const multipleValues = getValues(["test", "test1"])
// ["test-input", "test1-input"]
}}
>
Get Values
</button>
</form>
)
}
import React from "react"
import { useForm } from "react-hook-form"
// Flat input values
type Inputs = {
key1: string
key2: number
key3: boolean
key4: Date
}
export default function App() {
const { register, getValues } = useForm<Inputs>()
getValues()
return <form />
}
// Nested input values
type Inputs1 = {
key1: string
key2: number
key3: {
key1: number
key2: boolean
}
key4: string[]
}
export default function Form() {
const { register, getValues } = useForm<Inputs1>()
getValues()
// function getValues(): Record<string, unknown>
getValues("key1")
// function getValues<"key1", unknown>(payload: "key1"): string
getValues("key2")
// function getValues<"key2", unknown>(payload: "key2"): number
getValues("key3.key1")
// function getValues<"key3.key1", unknown>(payload: "key3.key1"): unknown
getValues<string, number>("key3.key1")
// function getValues<string, number>(payload: string): number
getValues<string, boolean>("key3.key2")
// function getValues<string, boolean>(payload: string): boolean
getValues("key4")
// function getValues<"key4", unknown>(payload: "key4"): string[]
return <form />
}
React Hook Form 中文网 - 粤ICP备13048890号