ユーザ用ツール

サイト用ツール


programming:frontend:typescript:react:login:contextを使ったシンプルなログイン機能

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
programming:frontend:typescript:react:login:contextを使ったシンプルなログイン機能 [2022/06/29 05:46] dotprogramming:frontend:typescript:react:login:contextを使ったシンプルなログイン機能 [2022/06/29 08:05] (現在) dot
行 21: 行 21:
       setUser({account: "miyazato"});       setUser({account: "miyazato"});
     }     }
 +  };
 +  const logout = () => {
 +    setUser(null);
   };   };
  
行 36: 行 39:
           </label>           </label>
           <button onClick={login}>Login</button>           <button onClick={login}>Login</button>
 +          <button onClick={logout}>Logout</button>
           <Content/>           <Content/>
         </UserContext.Provider>         </UserContext.Provider>
行 47: 行 51:
   return (   return (
     <div>     <div>
 +      { 
 +        user ?
       <span>LoginUser: {user?.account}</span>       <span>LoginUser: {user?.account}</span>
 +      :
 +      <span>LoginUser: (Not Logged In)</span>
 +      }
     </div>     </div>
   );   );
programming/frontend/typescript/react/login/contextを使ったシンプルなログイン機能.1656481572.txt.gz · 最終更新: 2022/06/29 05:46 by dot