我需要双击“登录”按钮才能使用 Ionic + React 在 console.log 中显示电子邮件和密码

Question

就我而言，我需要双击“登录”按钮才能显示电子邮件和密码

import React, { useEffect } from 'react';
import { IonButton, IonCardContent, IonContent, IonIcon, IonInput, IonItem, IonList, IonLoading, IonPage, useIonRouter } from '@ionic/react';
import { mailOpenOutline, lockClosedOutline } from 'ionicons/icons';

const LoginPage: React.FC = () => {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const navigation = useIonRouter();

  useEffect(() => {}, [email, password])

  const handlerLogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log("set", email, "this email");
    console.log("set", password, "this password");
  }

  const signUp = () => {
    navigation.push('/register')
  }

  return (
    <IonPage>
      <IonContent className="ion-padding">
        <IonCardContent>
          <IonList>
            <form onSubmit={handlerLogin}>
              <IonItem>
                <IonInput
                  label='Email'
                  labelPlacement='stacked'
                  placeholder='[email protected]'
                  type='email'
                  clearInput={true}
                  onIonChange={(e: any) => setEmail(e.target.value)}
                >
                  <IonIcon slot='start' icon={mailOpenOutline} />
                </IonInput>
              </IonItem>
              <IonItem>
                <IonInput
                  className='ion-margin-top'
                  label='Password'
                  labelPlacement='stacked'
                  placeholder='*******'
                  type='password'
                  onIonChange={(e:any) => setPassword(e.target.value)}
                >
                  <IonIcon slot='start' icon={lockClosedOutline} />
                </IonInput>
              </IonItem>
              <IonButton type='submit' expand='full' shape='round' fill='outline'>
                Login
              </IonButton>
            </form>
            <IonButton color={'danger'} expand='full' shape='round' fill='outline' onClick={() => signUp()}>
              Daftar
            </IonButton>
            <IonLoading isOpen={loading} message={'Harap Tunggu'} />
          </IonList>
        </IonCardContent>
      </IonContent>
    </IonPage>
  );
};

export default LoginPage;

当我单击 console.log 上的“登录”按钮时，它会显示如下图像

当我双击“登录”按钮时，它将显示 console.log，如下所示

• 克隆仓库
• https://github.com/ujangaripin24/ionic-react-firebase-chatingmake
• 确保您使用 Node 20.xx.x 确保您使用 Ionic 7.x.x Ionic cap
• 运行 android -l --livereload --external wait util 项目运行于
• SDK 使用 chrome 使用“chrome://inspect”打开检查元素
• 地址栏输入电子邮件和密码，然后单击按钮并
• 再次单击按钮

我想通过单击“登录”按钮在 console.log 上显示电子邮件和密码，我该如何操作？我的代码有问题吗？

Answer 1

与 Ionic 无关，而是一般的 js 问题。但总体想法是使用布尔标志来跟踪按钮是否被单击一次或两次。