問題一覧に戻る
中級フォーム処理
問題45: テキストエリア

複数行入力の処理と制御コンポーネントパターンの応用を学びます。textareaも通常のinputと同様に制御コンポーネントとして扱えます。文字数制限やリアルタイムの文字数表示など、ユーザーフレンドリーな機能を実装できます。また、trimメソッドを使用して空白文字のみの入力を防ぐバリデーションも重要です。コメントフォームやメッセージ入力など、実際のアプリケーションでよく使用される要素です。

import React, { useState } from 'react';

function Comment() {
  const [text, setText] = useState("");

  return (
    <div>
      {/* テキストエリアを制御 */}
      <
        ={text}
        ={(e) => setText(e.target.value)}
        rows="3"
        placeholder="コメント..."
      />
      {/* 文字数カウント */}
      <p>{text.length}/100</p>
    </div>
  );
}

export default Comment;
···