フォームデータ取得の達人になる！React.jsで使える5つのテクニック

React.jsでフォームデータを取得する方法

e.target.value を使用する

これは最も単純な方法ですが、個々のフォーム要素の値しか取得できません。

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = e.target.name.value;
    const email = e.target.email.value;
    // ...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">送信</button>
    </form>
  );
};

useState と useEffect を使用する

この方法では、フォーム全体のデータを取得することができます。

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  useEffect(() => {
    const handleChange = (e) => {
      setFormData({
        ...formData,
        [e.target.name]: e.target.value,
      });
    };

    // フォーム要素の変更イベントにリスナーを追加
    document.addEventListener('change', handleChange);

    // コンポーネントがアンマウントされるとき、リスナーを削除
    return () => document.removeEventListener('change', handleChange);
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    // ...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={(e) => handleChange(e)} />
      <input type="email" name="email" value={formData.email} onChange={(e) => handleChange(e)} />
      <button type="submit">送信</button>
    </form>
  );
};

react-hook-form などのライブラリを使用すると、フォームデータの取得をより簡単に、効率的に行うことができます。

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

const MyForm = () => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    // ...
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="name" ref={register} />
      <input type="email" name="email" ref={register} />
      <button type="submit">送信</button>
    </form>
  );
};

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

const MyForm = () => {
  // 方法1: 個々のフォーム要素の値を取得
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  // 方法2: フォーム全体のデータを取得
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  // 方法3: react-hook-form ライブラリを使用
  const { register, handleSubmit, errors } = useForm();

  // 方法2: フォーム要素の変更イベントを処理
  useEffect(() => {
    const handleChange = (e) => {
      setFormData({
        ...formData,
        [e.target.name]: e.target.value,
      });
    };

    // フォーム要素の変更イベントにリスナーを追加
    document.addEventListener('change', handleChange);

    // コンポーネントがアンマウントされるとき、リスナーを削除
    return () => document.removeEventListener('change', handleChange);
  }, []);

  // フォーム送信時の処理
  const handleSubmit = (e) => {
    e.preventDefault();

    // 方法1: 個々のフォーム要素の値を取得
    const name = e.target.name.value;
    const email = e.target.email.value;

    // 方法2: フォーム全体のデータを取得
    const formData = {
      name: e.target.name.value,
      email: e.target.email.value,
    };

    // 方法3: react-hook-form ライブラリを使用
    const data = e.target.value;

    // ... ここにフォームデータ処理のコード ...
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 方法1: 個々のフォーム要素の値を取得 */}
      <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />

      {/* 方法2: フォーム全体のデータを取得 */}
      <input type="text" name="name" value={formData.name} onChange={(e) => handleChange(e)} />
      <input type="email" name="email" value={formData.email} onChange={(e) => handleChange(e)} />

      {/* 方法3: react-hook-form ライブラリを使用 */}
      <input type="text" name="name" ref={register} />
      <input type="email" name="email" ref={register} />

      <button type="submit">送信</button>
    </form>
  );
};

export default MyForm;

このコードを参考に、あなたのプロジェクトに合った方法でフォームデータを取得してください。

フォームデータを取得するその他の方法

refs を使用すると、フォーム要素のDOM要素に直接アクセスすることができます。

const MyForm = () => {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameRef.current.value;
    const email = emailRef.current.value;
    // ...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" ref={nameRef} />
      <input type="email" name="email" ref={emailRef} />
      <button type="submit">送信</button>
    </form>
  );
};

useImperativeHandle と forwardRef を使用すると、子コンポーネントから親コンポーネントにフォームデータを渡すことができます。

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // ...
  };

  const childRef = useRef();

  return (
    <form onSubmit={handleSubmit}>
      <MyInput ref={childRef} />
      <button type="submit">送信</button>
    </form>
  );
};

const MyInput = React.forwardRef((props, ref) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleChange = (e) => {
    setName(e.target.name);
    setEmail(e.target.email);
  };

  useEffect(() => {
    // 親コンポーネントにフォームデータを渡す
    ref.current = {
      name,
      email,
    };
  }, [name, email]);

  return (
    <div>
      <input type="text" name="name" value={name} onChange={handleChange} />
      <input type="email" name="email" value={email} onChange={handleChange} />
    </div>
  );
});

import { Formik, Field } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{
        name: '',
        email: '',
      }}
      onSubmit={(values) => {
        // ...
      }}
    >
      <form>
        <Field type="text" name="name" />
        <Field type="email" name="email" />
        <button type="submit">送信</button>
      </form>
    </Formik>
  );
};