React Hooksを使ったフォームの実装方法

React Hooksを使ったフォームの実装方法について解説します。フォームはWebアプリケーションにおいて必要不可欠な機能の一つであり、Reactでもよく使われます。Hooksを使うことで、フォームの状態を管理する際によりシンプルなコードを書くことができます。

useStateを使ったフォームの実装方法

まずは、useStateを使ったフォームの実装方法を紹介します。useStateはReact Hooksの中でも最も基本的なものであり、状態を管理するために使用されます。

以下は、名前とメールアドレスを入力するフォームの例です。

import React, { useState } from 'react';

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name, email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label>
        メールアドレス:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <button type="submit">送信</button>
    </form>
  );
}

export default Form;

この例では、useStateを使ってnameとemailの状態を管理しています。フォームが送信されたときには、handleSubmit関数が呼ばれ、コンソールに入力された値が表示されます。

useReducerを使ったフォームの実装方法

次に、useReducerを使ったフォームの実装方法を紹介します。useReducerは、複雑な状態の変更を管理するために使用されます。

以下は、useStateを使った例と同様のフォームをuseReducerを使って実装した例です。

import React, { useReducer } from 'react';

const initialState = {
  name: '',
  email: '',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'changeName':
      return { ...state, name: action.payload };
    case 'changeEmail':
      return { ...state, email: action.payload };
    default:
      throw new Error();
  }
};

const Form = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(state.name, state.email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前:
        <input type="text" value={state.name} onChange={(e) => dispatch({
type: 'changeName', payload: e.target.value})} />
      </label>
      <label>
        メールアドレス:
        <input type="email" value={state.email} onChange={(e) => dispatch({ type: 'changeEmail', payload: e.target.value})} />
      </label>
      <button type="submit">送信</button>
    </form>
  );
}

export default Form;

この例では、useReducerを使ってnameとemailの状態を管理しています。reducer関数は、dispatch関数によって呼ばれ、actionのtypeに応じてstateを変更します。フォームが送信されたときには、handleSubmit関数が呼ばれ、コンソールに入力された値が表示されます。

まとめ

今回は、React Hooksを使ったフォームの実装方法について紹介しました。useStateを使うことでシンプルなコードで状態を管理することができ、useReducerを使うことで複雑な状態の変更を管理することができます。フォームはWebアプリケーションにおいて欠かせない機能なので、Reactを使う場合には覚えておくと便利です。