为什么我的表单输入无法正确更新？

Question

每当我在登录表单上点击“提交”时，相关文本字段中的值有时不会出现。我可以定位我的元素并使用 document.addEventListener 但如果我决定使用离子电容器，这将无法编译。

const LoginForm: React.FC = () => {
  const { handleLogin } = useAuth();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // handleLogin(username, password);
    console.log("Username: ", username);
    console.log("Password: ", password);

    // Sometimes these values are half complete or just straight up empty strings??
  };

  return (
    <IonPage>
      <IonContent className="ion-padding ion-text-center">
        <div className="login-container">
          <h2>Login</h2>
          <form onSubmit={handleSubmit} className="form">
            <IonItem className="form-item">
              <IonLabel position="floating">Username</IonLabel>
              <IonInput
                value={username}
                onIonInput={(e) => setUsername(e.detail.value!)}
                className="form-input"
              />
            </IonItem>
            <IonItem className="form-item">
              <IonLabel position="floating">Password</IonLabel>
              <IonInput
                type="password"
                value={password}
                onIonInput={(e) => setPassword(e.detail.value!)}
                className="form-input"
              />
            </IonItem>
            {error && <IonText color="danger" className="error-text">{error}</IonText>}
            <IonButton expand="full" type="submit" className="submit-button">
              Login
            </IonButton>
          </form>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default LoginForm;

有时密码或用户名可能是正确的、空字符串或半完整的。如果我先填写用户名，然后填写密码，则密码将为空字符串（反之亦然）。这是什么原因造成的？

Answer 1

事实证明，您可以在表单中使用 onIonChange 而不是 onIonInput。 onIonChange 会触发每次击键，但 onIonInput 会在每次单击输入字段时更新状态变量。如果输入密码或用户名并在单击输入字段之前立即单击提交按钮，则使用该字段的旧值（空白字符串或半输入的字符串，具体取决于用户所做的操作）。