4-3. 複数のuseStateを使う

複数の状態を管理する方法を学びます

React - 第2章: React Hooks - useState

📚

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

課題：複数のuseStateを使おう

1つのコンポーネントで複数の状態を管理できます。メールアドレスとパスワードを入力できるログインフォームを作ってみましょう。

やること

1.メールアドレスの状態を作る（初期値: 空文字）
2.パスワードの状態を作る（初期値: 空文字）
3.それぞれの入力フィールドを作る
4.「送信」ボタンをクリックしたら入力内容を表示する

複数の状態を管理する

useStateは何度でも使えます：

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

それぞれの状態を個別に更新できます：

<input 
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

<input 
  type="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

ポイント：関連する値でも、基本的には別々のuseStateで管理します。必要なだけuseStateを使ってOKです。

期待される出力

メール: [入力フィールド]
パスワード: [入力フィールド]
[送信]

入力内容:
メール: [email protected]
パスワード: ••••••••

import { useState } from 'react';

function App() {
  // ここにemailとpasswordの状態を作成してください
  
  
  
  const handleSubmit = () => {
    // ここでメールとパスワードをコンソールに出力
    console.log("メール:", email);
    console.log("パスワード:", password);
  };
  
  return (
    <div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto' }}>
      <h2>ログインフォーム</h2>
      
      <div style={{ marginTop: '20px' }}>
        <label style={{ display: 'block', marginBottom: '5px' }}>
          メールアドレス
        </label>
        {/* ここにemailのinputを作成 */}
        <input 
          type="email"
          style={{ 
            width: '100%', 
            padding: '10px', 
            fontSize: '16px',
            border: '1px solid #ccc',
            borderRadius: '4px'
          }}
        />
      </div>
      
      <div style={{ marginTop: '15px' }}>
        <label style={{ display: 'block', marginBottom: '5px' }}>
          パスワード
        </label>
        {/* ここにpasswordのinputを作成 */}
        <input 
          type="password"
          style={{ 
            width: '100%', 
            padding: '10px', 
            fontSize: '16px',
            border: '1px solid #ccc',
            borderRadius: '4px'
          }}
        />
      </div>
      
      <button 
        onClick={handleSubmit}
        style={{ 
          marginTop: '20px',
          padding: '10px 30px',
          fontSize: '16px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        送信
      </button>
      
      {/* ここに入力内容を表示 */}
      <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f8f9fa', borderRadius: '4px' }}>
        <h3>入力内容:</h3>
        <p>メール: </p>
        <p>パスワード: </p>
      </div>
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 4-2. useStateで文字列を管理する

次のレッスン: 5-1. useEffectの基本を理解する →