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

React Hooksを使うことで、フォーム入力をシンプルに実装することができます。本記事では、React Hooksを使ったフォーム入力の実装方法について説明します。

useStateを使った基本的なフォーム入力

useStateを使うことで、フォーム入力の値を管理することができます。以下のコードでは、名前とメールアドレスの入力欄を表示し、入力された値をstateに保存しています。

import React, { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Name: ${name}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

上記のコードでは、useStateを使ってnameとemailのstateを定義しています。それぞれのstateは、useStateの戻り値として配列に格納されています。また、入力欄の値が変更されたときには、onChangeイベントでsetStateを呼び出して、stateの値を更新しています。

useReducerを使ったフォーム入力

useReducerを使うことで、複雑なフォーム入力をシンプルに実装することができます。以下のコードでは、複数のフォーム入力を1つのreducerで管理しています。

import React, { useReducer } from 'react';

const formReducer = (state, event) => {
  return {
    ...state,
    [event.name]: event.value
  };
};

function Form() {
  const [formData, setFormData] = useReducer(formReducer, {});

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  const handleChange = (event) => {
    setFormData({
      name: event.target.name,
      value: event.target.value,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name || ''} onChange={handleChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" value={formData.email || ''} onChange={handleChange} />
      </label>
      <br />
      <button type="submit
> Submit</button>
    </form>
  );
}

export default Form;

上記のコードでは、useReducerを使ってformReducerを定義しています。このreducerは、各フォーム入力の値をstateに保存するために使用されます。handleChange関数は、dispatch関数を呼び出して、reducerにアクションを渡しています。また、handleSubmit関数では、formDataの値をログに出力しています。

useContextを使ったフォーム入力

useContextを使うことで、複数のコンポーネント間でフォーム入力の値を共有することができます。以下のコードでは、フォームの値をグローバルなstateに保存して、複数のコンポーネントで参照しています。

import React, { useState, useContext } from 'react';

const FormContext = React.createContext();

function FormProvider(props) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <FormContext.Provider value={{ name, setName, email, setEmail }}>
      {props.children}
    </FormContext.Provider>
  );
}

function Form() {
  const { name, setName, email, setEmail } = useContext(FormContext);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Name: ${name}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export { FormProvider, Form };

上記のコードでは、FormContextを定義して、グローバルなstateを作成しています。FormProviderコンポーネントでは、FormContext.Providerを使用して、子コンポーネントにグローバルなstateを渡しています。Formコンポーネントでは、useContextを使用して、グローバルなstateを参照しています。

まとめ

React Hooksを使うことで、フォーム入力の実装がシンプルになります。useStateを使うことで、単純なフォーム入力を実装することができます。useReducerを使うことで、複雑なフォーム入力をシンプルに実装することができます。useContextを使うことで、複数のコンポーネントで共有するフォーム入力の値を管理することができます。以上の方法を組み合わせることで、様々なフォーム入力を実装することができます。