react功能组件中的react原生表单电子邮件和密码验证

import React, { useState } from 'react';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // 进行电子邮件和密码验证
    if (!email) {
      setErrorMessage('请输入电子邮件');
      return;
    }

    if (!password) {
      setErrorMessage('请输入密码');
      return;
    }

    // 验证通过，进行登录操作
    // ...

    // 清空表单字段
    setEmail('');
    setPassword('');
    setErrorMessage('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">电子邮件：</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={handleEmailChange}
        />
      </div>
      <div>
        <label htmlFor="password">密码：</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={handlePasswordChange}
        />
      </div>
      <div>{errorMessage}</div>
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginForm;