問題一覧に戻る
初級状態管理
問題20: 文字列のstate

テキスト入力をuseStateで管理する方法を学びます。制御コンポーネントの作り方と、リアルタイムでの値の更新を実装します。

import React, { useState } from 'react';

function TextInput() {
  // 文字列のstateを宣言
  const [text, setText] = useState();

  // 入力変更ハンドラー
  const handleChange = (e) => {
    setText(e.target.);
  };

  return (
    <div>
      {/* 制御された入力フィールド */}
      <input 
        type="text"
        ={text}
        ={handleChange}
        placeholder="テキストを入力"
      />
      {/* 現在のテキストを表示 */}
      <p>入力: {}</p>
    </div>
  );
}

export default TextInput;
···