import React, { useState } from 'react';

const ControlledForm = () => {
  // ReactのuseStateフックを使用してフォームの入力値を管理
  const [inputValue, setInputValue] = useState('');

  // 入力変化時に実行される関数
  const handleChange = (event) => {
    setInputValue(event.target.value); // 入力値を状態にセットする
  };

  // フォーム送信時に実行される関数
  const handleSubmit = (event) => {
    event.preventDefault(); // フォーム送信時のページリロードを防ぐ
    alert(`送信された値: ${inputValue}`); // 入力値をアラート表示
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        入力:
        <input
          type="text" // テキスト入力フィールド
          value={inputValue} // 入力値をstateにバインド
          onChange={handleChange} // 入力中の変化をhandleChangeで受け止める
        />
      </label>
      <button type="submit">送信</button> {/* 送信ボタン */}
    </form>
  );
};

export default ControlledForm;

import React, { useRef } from 'react';

const UncontrolledForm = () => {
    // useRefで参照を作成
    const nameInputRef = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        // refを使って入力内容にアクセス
        alert(`Entered Name: ${nameInputRef.current.value}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">Name: </label>
                <input type="text" id="name" ref={nameInputRef} />
            </div>
            <div>
                <button type="submit">Submit</button>
            </div>
        </form>
    );
};

export default UncontrolledForm;