4-2. useStateで文字列を管理する

useStateとフォーム入力を学びます

React - 第2章: React Hooks - useState

📚

関連する教科書第2章: React Hooks - useState

課題：useStateで文字列を管理しよう

useStateは数値だけでなく、文字列も管理できます。入力フォームを作って、ユーザーが入力した名前を表示してみましょう。

やること

1.名前の状態を作る（初期値: 空文字 ""）
2.<input> で名前を入力できるようにする
3.入力された名前を状態に保存する
4.「こんにちは、〇〇さん！」と表示する

入力フォームとuseState

文字列の状態を作ります：

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

inputの値を状態と連動させます：

<input 
  type="text"
  value={name}
  onChange={(e) => setName(e.target.value)}
  placeholder="名前を入力"
/>

value={name}: 状態の値を表示
onChange: 入力が変わったときに状態を更新
e.target.value: 入力された値

ポイント：value と onChange を両方設定することで、 Reactが入力フィールドを管理できます（制御されたコンポーネント）。

期待される出力

[入力フィールド: 太郎]
こんにちは、太郎さん！

import { useState } from 'react';

function App() {
  // ここに名前の状態を作成してください
  // 初期値は空文字 ""
  
  
  return (
    <div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto' }}>
      <h2>名前入力フォーム</h2>
      
      {/* ここにinputを作成 */}
      {/* value、onChange、placeholderを設定してください */}
      <input 
        type="text"
        style={{ 
          width: '100%', 
          padding: '10px', 
          fontSize: '16px',
          marginTop: '10px',
          border: '1px solid #ccc',
          borderRadius: '4px'
        }}
      />
      
      {/* ここに「こんにちは、〇〇さん！」を表示 */}
      <p style={{ marginTop: '20px', fontSize: '20px', fontWeight: 'bold' }}>
        
      </p>
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 4-1. useStateで数値を管理する

次のレッスン: 4-3. 複数のuseStateを使う →