Javascript 使用钩子和onChange处理程序进行条件呈现

我已经基于表单登录设置了链接的条件呈现。链接将根据我的条件有条件地呈现，但是，每次在登录表单中按下一个键时，onChange事件处理程序都会触发

登录组件：

const Login = ({customerLogin, setCustomerLogin}) => {

  const handleChange = event => {
    setCustomerLogin({
      ...customerLogin,
      [event.target.name]: event.target.value
    });
  };

登录中的窗体事件处理程序：

<label htmlFor="username">Username</label>
<input type="text" name="username" onChange={handleChange} />

用户名

我的App.js：

function App() {
  const [customerLogin, setCustomerLogin] = useState(null);

  return (
    <div className="App">
      <Navbar isLoggedIn={!!customerLogin} />
      <Switch>
        <Route path="/signup" component={Signup} />
        <Route
          path="/login"
          render={() => (
            <Login
              customerLogin={customerLogin}
              setCustomerLogin={setCustomerLogin}
            />
          )}
        />
      </Switch>
    </div>
  );
}

函数应用程序（）{
const[customerLogin，setCustomerLogin]=useState（null）；
返回(
(
)}
/>
);
}

编辑：添加导航栏以进行澄清：

const Navbar = ({ isLoggedIn }) => {
    return (
        <nav className="nav-wrapper">
            <div className="container">
                <Link to='/' className="brand-logo left">Cars4U</Link>
                {isLoggedIn ? <SignedInLinks/> : <SignedOutLinks/>}            
            </div>
        </nav>
    )
};

const-Navbar=（{isLoggedIn}）=>{
返回(
Cars4U
{isLoggedIn？：}
)
};

您希望在这里实现什么

onChange

处理程序应该在每个键上启动除了错误验证之外，还需要什么吗？根据我的提交句柄，我不确定这里是否需要我的onChange处理程序。你指的是不受控制的组件。请参见，用户提交表单后，您是否正在查找导航栏以显示？有一个

onSubmit

回调，您可以使用我的导航栏，它只显示一个品牌徽标和一个登录链接，我正在尝试设置，当用户点击我的身份验证端点时，这些链接将更改为我的其他链接。我添加了导航栏组件以进行澄清