React Nativeのフォーム：入力、バリデーション、キーボード
React Nativeのフォームとバリデーションのガイド
React Nativeのフォーム：制御された入力とバリデーション | We.Inc
制御されたTextInput、1つの検証関数、各項目の下に出るエラーメッセージ、キーボードへの対応でReact Nativeのフォームを作りましょう。バリデーションはブラウザーでその場で試せます。
信頼できるReact Nativeのフォームには、3つの要素が必要です。状態で制御されたTextInput、項目ごとのエラーを返す1つの検証関数、そしてキーボードへの対応です。各メッセージは、利用者がその項目から離れたとき、または送信ボタンを押したときに表示しましょう。画面をKeyboardAvoidingViewで囲み、ScrollViewに keyboardShouldPersistTaps="handled" を設定すれば、送信ボタンに届かなくなることはありません。
React Nativeのフォームを構成する要素
- 値を保持する
- 1つのオブジェクトを持つuseState、または項目ごとに1つのフック
- 値をチェックする
- エラーのオブジェクトを返す純粋関数 validate(values)
- エラーを表示する
- 各項目の下のテキスト。accessibilityLabelかライブリージョンで関連付ける
- 入力欄を見えるようにする
- iOSでは behavior="padding" を指定したKeyboardAvoidingView
- キーボードを開いたまま送信をタップする
- ScrollViewに keyboardShouldPersistTaps="handled"
- 項目間を移動する
- returnKeyType="next" と、次のrefに対するfocus()
このページのバリデーションルールは普通のJavaScriptなので、下のプレビューでは、React Nativeの画面にそのまま貼り付ける関数がそのまま動いています。項目を入力して離れ、「アカウントを作成」を押すと、各メッセージが表示されたり消えたりする様子を確認できます。
- 各項目は、onChangeTextを通じて1つの値オブジェクトに書き込みます。
- onBlurで項目を「操作済み」にするので、入力の途中で利用者を責めることなくエラーを表示できます。
- validate(values) は毎回のレンダリングで実行され、破られたルールごとにメッセージを入れたオブジェクトを返します。
- 送信するとすべての項目が操作済みになり、エラーのオブジェクトにキーが1つでもあれば処理を止めます。
- エラーがなくなれば、ハンドラーが値を送信し、Keyboard.dismiss() を呼ぶこともできます。
- validateは純粋関数に保ちましょう。何もレンダリングせずにテストでき、サーバーでも再利用できます。
- フォームが無効な間も送信ボタンを無効化しないでください。多くの人は、ボタンを押してみて何が足りないかに気づきます。
- エラーのテキストは対応する項目のすぐ下に置き、問題の直し方がわかる言葉で書きましょう。
- メールアドレスはチェックする前に前後の空白を取り除きましょう。貼り付けたときに末尾に入るスペースが、誤ったエラーの最も多い原因です。
- サーバーですべてを再チェックしましょう。クライアント側のルールは利用者を導くためのもので、信頼はできません。
よくある質問
React Nativeにフォームライブラリは必要ですか？
必要ありません。項目が少なければ、useStateと、このページのような検証関数で十分に機能します。ライブラリが役立つのは、項目が多い、入れ子の配列がある、非同期のチェックがある、といったフォームです。React Hook Formは、Webでも React Native でも動くと説明しています。
キーボードで入力欄が隠れないようにするには？
フォームをKeyboardAvoidingViewで囲みます。これはキーボードに合わせて自身の高さ、位置、下部の余白を変えます。iOSでは behavior="padding" がよく使われます。keyboardVerticalOffsetはビューの上にあるヘッダーの分を考慮するためのもので、デフォルトは0です。
送信ボタンを2回タップしないといけないのはなぜですか？
ScrollViewのkeyboardShouldPersistTapsはデフォルトが "never" なので、最初のタップはキーボードを閉じるだけになります。"handled" に設定すれば、ボタンがすぐにタップを受け取ります。
送信後にキーボードを閉じるには？
Keyboard.dismiss() を呼びます。ドキュメントでは、アクティブなキーボードを閉じてフォーカスを外すと説明されています。
エラーを表示するタイミング
- 画面を開いた瞬間にすべてのルールを赤で表示すると、叱られているように感じます。利用者がどの項目を操作したかを記録し、その項目から離れた後か、送信を試みた後にだけメッセージを表示しましょう。
- メッセージが表示されたら、キー入力のたびにチェックをやり直し、値が有効になった瞬間に消えるようにします。表示を待ったことの見返りが、この即座の確認です。
エラーをアクセシブルにする
- 赤い枠線だけでは、スクリーンリーダーの利用者や色覚に制約のある人には何も伝わりません。問題をテキストで書き、項目のaccessibilityLabelにも含めて、フォーカスが来たときに読み上げられるようにしましょう。
- Androidでは、エラーのTextに accessibilityLiveRegion="polite" を付けると、メッセージが表示されたときに、フォーカスを動かさずにTalkBackが読み上げます。
コピーして使えるフォームのコード
検証関数
React Nativeのインポートがない普通のJavaScriptなので、テストでも、Webのプレビューでも、サーバーでも動きます。
操作済みの項目とキーボード対応を備えた登録画面
1つの値オブジェクト、1つの操作済みオブジェクト、そして必要なときだけエラーを表示するFieldヘルパーで構成しています。
名前を入力してください。
メールアドレスを入力してください。
このメールアドレスには @ またはドメインがありません。
8文字以上で入力してください。
2つのパスワードが一致しません。
バリデーションのプレビュー
チェックには下のコードの検証関数を使っています。メッセージは、項目から離れたときかボタンを押したときに表示されます。
名前
パスワード
パスワード（確認）
アカウントを作成
すべての項目が有効です。実際のアプリなら、ここで値を送信します。
{n}個の項目を確認してください。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る