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

Question

我正在制作一个 Ionic React 应用程序并使用 Firebase 对我的用户进行身份验证。我面临的一个问题是，在 login/registration 页面上，如果用户的用户名（电子邮件）或密码是自动填充的，则该输入项的 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>

Answer 1

您找到问题的解决方案了吗？

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

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