Question 401757 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why are my form inputs not updating correctly?

Whenever I hit submit on my login form, the values in the relevant text fields are not present sometimes. I could target my element and use document.addEventListener but this will not compile if I decide to use Ionic Capacitor down the line.

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;

Sometimes either password or username will be correct, empty strings or half-complete. If I fill in the username first and then the password, the password will be an empty string (and vice versa). What is causing this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out you can just use onIonChange instead of onIonInput for the form. onIonChange triggers every keystroke but onIonInput triggers every time you click off the input field. In cases where the password or username was entered and the submit button was immediately clicked (before clicking off the input fields) the old value of the field was used (a blank string or half-entered string depending on what the user did).


  2. 0

    You just need to change your code a bit:

    Replace onIonInput with onIonChange:

    This make ensure the state updates more reliably.
    Change e.detail.value! to e.target.value as string:

    To have access to the value directly from the target.

    Here is a code snippet to guide you:

    <IonInput
  value={username}
  onIonChange={(e) => setUsername(e.target.value as string)}
  className="form-input"
/>

<IonInput
  type="password"
  value={password}
  onIonChange={(e) => setPassword(e.target.value as string)}
  className="form-input"
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search