reactでフォームのデータを取り出すには？

React でフォームのデータを扱う方法にはいくつかのものがあります。

1. 管理対象のコンポーネントを使用する: input 要素の値を状態の値にバインドし、ユーザーが入力すると状態の値も更新される。その後、状態の値を通じてフォームデータを取得できる。

import React, { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

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

export default Form;

1. 非制御コンポーネントを使う場合: refを利用してinputエレメントの値を取得する。

import React, { useRef } from 'react';

function Form() {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value, emailRef.current.value);
  };

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

export default Form;

上記の例では、nameRefとemailRefはinput要素を参照しており、nameRef.current.valueとemailRef.current.valueを呼び出すことで対応するinput値を取得できます。

フォームデータを取得する方法としては2種類あり、どちらを使用するかは状況と好みによります。