reactjs - Ionic/React - 浏览器自动填充输入项时如何从输入项中获取值？

Question

我正在制作一个 Ionic React 应用程序并使用 Firebase 对我的用户进行身份验证。我面临的一个问题是，在登录/注册页面上，如果自动填充用户的用户名（电子邮件）或密码，则不会触发输入项的 onChange 事件，并且用户的信息不会保存到我的组件状态. 有没有更好的方法可以让我在不完全hacky的情况下做到这一点？

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>

标签： reactjsionic-frameworkfirebase-authenticationautofill

Answer 1

你找到解决问题的方法了吗？

我遇到了同样的问题，并通过使用onIonInput事件来解决它。

onIonInput={(e: any) => setPassword(e.target.value)}