📋
Fluent UI で React Hook Form を使ってみる
はじめに
React におけるフォーム ライブラリとしては React Hook Form が有名です。React Hook Form は面倒なフォームのバリデーションや値の管理などが簡単に実現できます。検索結果の情報量も多いので導入しやすいと思います。React Hook Form は HTML 標準のフォーム要素だけではなく UI ライブラリに対しても適用することができます。今回は Fluent UI で React Hook Form を使ってみます。
サンプル コード
実行手順
React Hook Form は ref
を使ってフォームを操作します。ref
を渡す方法は register
する方法と Cotroller
を使う方法がありますが、 HTML 標準のフォーム要素ではない場合は Cotroller
を使用します。Cotroller
は render
プロパティによって実際にレンダリングされるフォーム要素を指定することができ、field
パラメーターを経由して ref
の設定やイベントの伝播を行います。
以下にいくつかの例を挙げます。
FormInput
FormInput
は 1 行テキストを入力するフォーム要素です。
<Controller
control={form.control}
defaultValue={""}
name="{{name}}"
rules={{
required: 'The value is requred',
}}
render={({ field, fieldState }) => (
<FormInput
ref={field.ref}
errorMessage={fieldState.error?.message}
value={field.value}
onChange={(_, props) => field.onChange(props?.value)}
onBlur={field.onBlur}
/>
)}
/>
FormTextArea
FormTextArea
は複数行テキストを入力するフォーム要素です。
<Controller
control={form.control}
defaultValue={""}
name="{{name}}"
rules={{
required: 'The value is requred',
}}
render={({ field, fieldState }) => (
<FormTextArea
ref={field.ref}
errorMessage={fieldState.error?.message}
value={field.value}
onChange={(_, props) => field.onChange(props?.value)}
onBlur={field.onBlur}
/>
)}
/>
FormDatepicker
FormDatepicker
は日付を選択するフォーム要素です。
<Controller
control={form.control}
defaultValue={new Date()}
name="{{name}}"
rules={{
required: 'The value is requred',
}}
render={({ field, fieldState }) => (
<FormDatepicker
ref={field.ref}
errorMessage={fieldState.error?.message}
selectedDate={field.value}
onDateChangeError={(_, value) => form.setError(field.name, { message: value?.error })}
onDateChange={(_, props) => field.onChange(props?.value)}
onBlur={field.onBlur}
/>
)}
/>
実行結果
初期表示はこんな感じ。
Submit したときにバリデーションを実行してエラーを表示します。
エラーがなければ値を Submit します。
おわりに
Yup などを使うとより高度なバリデーションが実現できます。
Discussion