コンポーネントに型安全にReact Hook Formを適用する
4580 ワード
UseFormRegisterReturnを使う
InputPropsはInputタグがとりうる全ての属性の型が入ってると思ってください。
TextField.tsx
import { UseFormRegisterReturn } from 'react-hook-form'
type Props = InputProps & {
register?: UseFormRegisterReturn
error?: string
}
export function TextField(props: Props) {
const { error, register, ...rest } = props
return (
<input {...register} {...rest} />
<ErrorMessage>{error}</ErrorMessage>
)
}
Form.tsx
<TextField
register={register('name', { required: '必須です', })}
error={error}
>
なぜかregisterをそのままバインドしようとしてしまって、このUseFormRegisterReturnという型が意外と出てこなかった。
というかregisterを...で展開せずにそのままバインドしようとすると型定義がUseFormRegister<TFieldValues>になってて、ジェネリクスが必要でそれがちょっと難しいので展開して渡す方がいいと思う。
Author And Source
この問題について(コンポーネントに型安全にReact Hook Formを適用する), 我々は、より多くの情報をここで見つけました https://zenn.dev/yodaka/articles/cc909b405915c6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol