'use client';

import { useState } from 'react';

 export default function Page() {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     console.log(e.currentTarget.email.value);
     console.log(e.currentTarget.password.value);
   };
   return (
     <form onSubmit={handleSubmit}>
       <input type="text" name="email" />
       <input type="password" name="password" />
       <button type="submit">login</button>
     </form>
   );
 }

 /////////////////////////////////
export default function Page() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(email);
    console.log(password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        name="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">login</button>
    </form>
  );
}

字符串
上面的代码没有使用useState，而下面的代码使用useState指定值，使用onChange指定值。两者之间有什么区别，哪一个是更正确的代码？到目前为止我只写了下面的代码，但我看到了一些代码看起来像上面的代码。请告诉我两者之间的区别，哪一个是更正确的代码。