問題一覧に戻る
初級イベント処理
問題31: onSubmitイベント

フォーム送信の処理を学びます。デフォルト動作の防止と、カスタム送信処理の実装方法を理解しましょう。

import React, { useState } from 'react';

function LoginForm() {
  const [name, setName] = useState("");

  // 送信ハンドラー
  const handleSubmit = () => {
    // デフォルト動作を防止
    e.();
    alert(`送信: ${name}`);
  };

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

export default LoginForm;
···