問題一覧に戻る
初級状態管理
問題25: 複数のstate

複数のuseStateを使って関連する状態を管理します。フォームの入力、ローディング状態、エラーメッセージなどを統合的に扱います。

import React, { useState } from 'react';

function LoginForm() {
  // 複数のstateを宣言
  const [user, setUser] = useState("");
  const [pass, ] = useState("");
  const [loading, setLoading] = ();

  // 送信処理
  const submit = () => {
    setLoading(true);
    setTimeout(() => {
      alert(user && pass ? "OK" : "NG");
      {/* ローディング状態をリセット */}
      setLoading();
    }, 1000);
  };

  return (
    <div>
      {/* ユーザー名入力フィールド */}
      <input value={user} onChange={(e) => setUser(e.target.value)} />
      {/* パスワード入力フィールド */}
      <input value={pass} onChange={(e) => (e.target.value)} />
      <button onClick={submit} disabled={loading}>
        {loading ? "..." : "Go"}
      </button>
    </div>
  );
}

export default LoginForm;
···