如何在无路由的单页应用中实现用户登录后隐藏登录输入框

嘿，这事儿其实很简单，你已经有了loginStatus这个核心状态来追踪用户是否登录，只需要把输入框也套进这个状态的条件判断里就行！

修改后的代码示例 #

<div className="gpt3__navbar-sign">
  {/* 未登录时才渲染输入框 */}
  {!loginStatus && (
    <p>
      <div className="formField">
        <input 
          type="text" 
          className="loginInputField" 
          placeholder="E-Mail" 
          onChange={(e) => setUsername(e.target.value)} 
        />
        <input 
          type={passwordShown ? "text" : "password"} 
          className="loginInputField" 
          placeholder="Password" 
          onChange={(e) => setPassword(e.target.value)} 
        />
      </div>
    </p>
  )}
  <div className="gpt3__navbar-sign">
    {!loginStatus ? (
      <button onClick={login} className="formFieldButton">Einloggen</button>
    ) : (
      <button onClick={logoutUser} color="inherit"> Logout </button>
    )}
  </div>
</div>

关键说明 #

1. 条件渲染逻辑：和你控制登录/登出按钮的逻辑完全一致——当loginStatus为空（未登录）时，渲染输入框；登录后loginStatus会被设置为用户名或其他非空值，输入框就自动隐藏了。
2. 登出时的状态重置：记得在你的logoutUser函数里，要把loginStatus重置为空（比如setLoginStatus('')或者setLoginStatus(null)），这样登出后输入框才会重新显示出来。

这样修改后，就能完美实现你想要的“登录后隐藏输入框”的效果啦～

内容的提问来源于stack exchange，提问作者davinci