Ionic / React - Как получить значение из элемента ввода, когда он автоматически заполняется браузером? - PullRequest
Новая
       4

Ionic / React - Как получить значение из элемента ввода, когда он автоматически заполняется браузером?

0 голосов
/ 10 марта 2020

Я создаю приложение Ioni c React и использую Firebase для аутентификации моего пользователя. Одна проблема, с которой я сталкиваюсь, заключается в том, что на страницах входа в систему / регистрации, если имя пользователя (электронная почта) или пароль пользователя заполняются автоматически, событие onChange этого элемента ввода не запускается, и информация о пользователе не сохраняется в состоянии моего компонента. , Есть ли лучший способ, которым я могу выполнить это, не будучи полностью взломанным? 

const LoginPage: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  async function login() {
    const res = await loginUser(username, password);
    if(!res) {
      toast('There was an error logging in.') 
    }else {
      toast('You are logged in!');
    }
  }


...

            <IonItem>
              <IonLabel position="stacked">
                Email <IonText color="danger">*</IonText>
              </IonLabel>
              <IonInput
                required
                type="email"
                onIonChange={(e: any) => setUsername(e.target.value)}
              ></IonInput>
            </IonItem>
            <IonItem>
              <IonLabel position="stacked">
                Password <IonText color="danger">*</IonText>
              </IonLabel>
              <IonInput
                required
                type="password"
                value={password}
                onIonChange={(e: any) => setPassword(e.target.value)}
              ></IonInput>
            </IonItem>
          </IonList>
          <div className="ion-padding">
            <IonButton
              expand="block"
              onClick={login}
              class="ion-no-margin"
            >
              Login
            </IonButton>
          </div>
      </IonContent>
    </IonPage>
...