使用Hooks和onChange处理函数进行条件渲染

Question

我已经基于表单登录设置了条件链接渲染。链接将根据我的条件有条件地呈现，但是，每次将键按下到我的登录表单中时，我的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 Navbar = ({ isLoggedIn }) => {
    return (
        <nav className="nav-wrapper">
            <div className="container">
                <Link to='/' className="brand-logo left">Cars4U</Link>
                {isLoggedIn ? <SignedInLinks/> : <SignedOutLinks/>}            
            </div>
        </nav>
    )
};