React フォーム - Textarea

1. Textarea の扱い

React における textarea 要素は、通常の HTML とは少し異なる挙動を示します。

1.1 HTML と React の違い

標準的な HTML では、textarea の値（バリュー）は開始タグ <textarea> と終了タグ </textarea> の間に記述されたテキストとなります。

<textarea>
  テキストエリアの内容。
</textarea>

しかし、React では textarea の値は、input 要素と同様に value 属性の中に配置されます。これにより、React の ステート（State） で値を直接コントロールすることが可能になります。

2. React での制御

textarea の値を管理するために、useState フックを使用します。

2.1 実装例：制御された Textarea

React では value 属性を使用して textarea をコントロール（制御）します。

import { createRoot } from 'react-dom/client'
import { useState } from 'react'

function MyForm() {
  // テキストエリアの値を保持するステート変数を宣言
  const [mytxt, setMytxt] = useState("");

  // 入力変更時のイベントハンドラー
  function handleChange(e) {
    setMytxt(e.target.value);
  }

  return (
    <form>
      <label>入力してください:
        <textarea
          value={mytxt} // ステートを値にバインド
          onChange={handleChange} // 変更を検知してステートを更新
        />
      </label>
      <p>現在の値: {mytxt}</p>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

このように、React の 制御コンポーネント（Controlled Components） パターンを用いることで、入力内容をリアルタイムで検証したり、別のコンポーネントへ即座に反映させたりすることが非常に容易になります。従来の HTML のように DOM から直接値を取得するのではなく、常にステートを「唯一の信頼できる情報源（Single source of truth）」として扱うのが React 流の流儀です。