ReactでSubmit処理を実装

ReactでSubmit処理を実装

ReactでのフォームのSubmit処理を実装するTypeScriptの例を示します。
以下の例では、ユーザーの入力を処理し、Submitボタンをクリックしたときにデータをコンソールに表示する基本的なフォームを作成します。

import React, { useState } from 'react';

const FormComponent: React.FC = () => {
  const [formData, setFormData] = useState<{ name: string; email: string }>({ name: '', email: '' });
  const [error, setError] = useState<string | null>(null);

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

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!formData.name || !formData.email) {
      setError('すべてのフィールドを入力してください');
      return;
    }
    setError(null);
    console.log('送信されたデータ:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">名前:</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="email">メールアドレス:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">送信</button>
    </form>
  );
};

export default FormComponent;

この例では、useStateフックを使ってフォームのデータとエラーメッセージを管理しています。
handleChange関数は入力フィールドの値が変わるたびに呼び出され、handleSubmit関数はフォームが送信されたときに呼び出されます。
エラーメッセージがある場合は、画面に表示されるようになっています。