React.js フォーム送信処理

React.js での onSubmit イベントの処理

React.js では、フォームの送信を制御するために onSubmit イベントを使用します。このイベントは、フォームが送信されるときにトリガーされます。

基本的な例

import React, { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault(); // フォームのデフォルトの送信動作を阻止
    // フォームデータをサーバーに送信する処理
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={(event) => setFormData({ ...formData, name: event.target.value })}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={(event) => setFormData({ ...formData, email: event.target.value })}
      />
      <button type="submit">送信</button>
    </form>
  );
}

解説

1. onSubmit プロパティ
   

   • form 要素に onSubmit プロパティを設定します。
   • このプロパティには、フォームが送信されたときに実行される関数を指定します。

2. handleSubmit 関数
   

   • handleSubmit 関数は、フォームが送信されたときに呼び出されます。
   • event.preventDefault() を使用して、フォームのデフォルトの送信動作を阻止します。これにより、ページのリロードを防ぎます。
   • フォームデータをサーバーに送信する処理や、他の必要なロジックを実装します。

重要なポイント

• onSubmit イベントは、フォーム内のすべての入力要素が検証された後にトリガーされます。
• onSubmit イベントは、フォームが送信される前にトリガーされます。

import React, { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault(); // フォームのデフォルトの送信動作を阻止
    // フォームデータをサーバーに送信する処理
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={(event) => setFormData({ ...formData, name: event.target.value })}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={(event) => setFormData({ ...formData, email: event.target.value })}
      />
      <button type="submit">送信</button>
    </form>
  );
}

• 複雑なフォーム処理やバリデーションをカプセル化できます。
• フォームの送信処理を再利用可能なカスタムフックとして実装します。

import { useState } from 'react';

function useFormSubmit(initialValues) {
  const [formData, setFormData] = useState(initialValues);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errors, setErrors] = use   State({});

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsSubmitting(true);

    // フォームデータをサーバーに送信する処理
    try {
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: JSON.stringify(formData),
      });
      const data = await response.json();
      // 成功した場合の処理
    } catch (error) {
      // エラー処理
      setErrors(error.response.data);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { formData, handleSubmit, isSubmitting, errors };
}

Redux Form/Formikの使用

• Redux FormはReduxと連携し、Formikは独立して使用できます。
• フォーム管理ライブラリを使用することで、フォームの処理やバリデーションを簡素化できます。

Redux Form

import React from 'react';
import { reduxForm } from 'redux-form';

const MyForm = (props) => {
  const { handleSubmit } = props;

  return (
    <form onSubmit={handleSubmit}>
      {/* フォーム要素 */}
      <button type="submit">送信</button>
    </form>
  );
};

export default reduxForm({
  form: 'myForm',
})(MyForm);

Formik

import React from 'react';
import { Formik } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{
        name: '',
        email: '',
      }}
      onSubmit={(values, { setSubmitting }) => {
        // フォームデータをサーバーに送信する処理
        setSubmitting(false);
      }}
    >
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          {/* フォーム要素 */}
          <button type="submit">送信</button>
        </form>
      )}
    </Formik>
  );
};

カスタムイベントの使用

• フォームの送信処理を親コンポーネントから子コンポーネントにイベントとして伝達します。

import React, { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームデータをサーバーに送信する処理
    const data = { ...formData };
    // 親コンポーネントにイベントを伝達
    window.dispatchEvent(new CustomEvent('formSubmit', { detail: data }));
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* フォーム要素 */}
      <button type="submit">送信</button>
    </form>
  );
}

function ParentComponent() {
  const handleFormSubmit = (event) => {
    const data = event.detail;
    // フォームデータをサーバーに送信する処理
  };

  return (
    <div>
      <MyForm />
    </div>
  );
}