如何在react管理自定义登录页面中设置未定义的用户名？

import React, { useState } from 'react';

function CustomLoginPage() {
  const [username, setUsername] = useState('');

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handleLoginFormSubmit = (event) => {
    event.preventDefault();

    if (username === '') {
      // 处理未定义用户名的逻辑，例如显示错误提示信息
      console.log('用户名未定义');
    } else {
      // 处理用户名已定义的逻辑
      console.log('用户名：', username);
    }
  };

  return (
    <form onSubmit={handleLoginFormSubmit}>
      <label>
        用户名：
        <input type="text" value={username} onChange={handleUsernameChange} />
      </label>
      <button type="submit">登录</button>
    </form>
  );
}

export default CustomLoginPage;