React Hooksで入力値を賢く扱う！ useState、useReducer、React Hook Formを使いこなそう

React Hooks を使った入力値の扱い方

useState フック

最も基本的な方法は、useState フックを使うことです。useState フックは、コンポーネント内にローカルステートを作成するためのフックです。入力値をステート変数に保持し、onChange イベントハンドラを使って更新することができます。

import React, { useState } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

この例では、useState フックを使って inputValue というステート変数を作成しています。inputValue は初期値として空文字列に設定されています。

onChange イベントハンドラは、入力値が変更されるたびに呼び出されます。このハンドラは、event.target.value を使って新しい入力値を取得し、setInputValue を使って inputValue ステート変数を更新します。

useReducer フック

より複雑な入力処理には、useReducer フックを使うことができます。useReducer フックは、ステートの更新ロジックをカプセル化するためのフックです。

import React, { useReducer } from 'react';

const initialState = {
  inputValue: '',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_INPUT_VALUE':
      return {
        ...state,
        inputValue: action.newValue,
      };
    default:
      return state;
  }
};

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { inputValue } = state;

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_INPUT_VALUE', newValue: event.target.value });
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

この例では、useReducer フックを使って state というステート変数を作成しています。state は、inputValue というプロパティを持つオブジェクトです。

reducer 関数は、ステートの更新ロジックを定義します。この例では、UPDATE_INPUT_VALUE というアクションタイプに対して、inputValue プロパティを新しい値に更新する処理を定義しています。

handleChange イベントハンドラは、dispatch 関数を使って UPDATE_INPUT_VALUE アクションを発行します。これにより、reducer 関数が呼び出され、inputValue ステート変数が更新されます。

React Hook Form ライブラリ

さらに高度な入力処理には、React Hook Form ライブラリを使うことができます。React Hook Form は、フォームの入力値を検証、管理するためのライブラリです。

import React from 'react';
import { useForm } from 'react-hook-form';

function MyComponent() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register('name', { required: true })} />
      {errors.name && <p>名前は必須です。</p>}
      <button type="submit">送信</button>
    </form>
  );
}

この例では、useForm フックを使って register、handleSubmit、formState というプロパティを取得しています。

register プロパティは、入力フィールドをフォームに登録するために使用されます。name という名前の入力フィールドを登録し、required: true というオプションを指定して、このフィールドが必須であることを示しています。

handleSubmit プロパティは、フォーム送信時の処理を定義するために使用されます。onSubmit 関数は、フォームが送信されたときに

React Hooks を使った入力値の扱い方のサンプルコード

useState フックを使った例

import React, { useState } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

useReducer フックを使った例

import React, { useReducer } from 'react';

const initialState = {
  inputValue: '',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_INPUT_VALUE':
      return {
        ...state,
        inputValue: action.newValue,
      };
    default:
      return state;
  }
};

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { inputValue } = state;

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_INPUT_VALUE', newValue: event.target.value });
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

React Hook Form ライブラリを使った例

import React from 'react';
import { useForm } from 'react-hook-form';

function MyComponent() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register('name', { required: true })} />
      {errors.name && <p>名前は必須です。</p>}
      <button type="submit">送信</button>
    </form>
  );
}

formState プロパティは、フォームの状態に関する情報を提供します。errors プロパティには、各入力フィールドの検証エラー情報が含まれています。

これらの例は、React Hooks を使って入力値を扱うためのほんの一例です。React Hooks には他にも様々な機能があり、状況に応じて使い分けることができます。

上記以外にも、以下のような方法もあります。

• useRef フック: 特定のDOM要素への参照を保持したい場合に便利です。
• カスタムフック: 独自のカスタムフックを作成することで、コードを再利用しやすくなります。

以下は、それぞれの方法の利点と欠点の簡単なまとめです。

具体的な状況に合わせて、適切な方法を選択してください。