React Hook Formを使用した電話番号の妥当性確認

まず、React Hook Formをプロジェクトにインストールします。ターミナルで以下のコマンドを実行します:

npm install react-hook-form

または

yarn add react-hook-form

React Hook Formをインストールしたら、フォームコンポーネントを作成しましょう。以下のようなコード例を参考にしてください:

import React from 'react';
import { useForm } from 'react-hook-form';
const PhoneNumberForm = () => {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    // フォームが正常に送信されたときの処理
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>電話番号:</label>
      <input
        type="text"
        name="phoneNumber"
        ref={register({ required: true, pattern: /^\d{10}$/ })}
      />
      {errors.phoneNumber && (
        <p>有効な10桁の電話番号を入力してください。</p>
      )}
      <button type="submit">送信</button>
    </form>
  );
};
export default PhoneNumberForm;

上記のコードでは、useFormフックを使用してフォームの状態とバリデーションルールを管理しています。register関数を使用して入力フィールドを登録し、handleSubmit関数を使用してフォームの送信イベントを処理します。

電話番号のバリデーションルールとして、register関数のpatternオプションに正規表現/^\d{10}$/を指定しています。これは10桁の数字のみを受け付けることを意味します。

フォームの送信時にエラーがある場合は、errorsオブジェクトからエラーメッセージを表示します。

以上で、React Hook Formを使用して電話番号の妥当性確認を実装する方法が説明されました。この方法を使えば、簡単にフォームバリデーションを実現することができます。