事件發生時，該函式createUserWithEmailAndPassword不會在SignUpUser函式內被呼叫onClick。但是當我這樣做的onClick={signUpUser(email,password)}時候
import React from 'react';
import styled from 'styled-components';
import { useState } from 'react';
import { signUpUser } from '../firebase';
function SignUpComponent() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<AuthForm>
<input type="text"
placeholder="Email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}/>
<input type="password"
name="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}/>
<SubmitFormButton
type="submit"
onClick={() => signUpUser(email,password)}
>
Sign Up
</SubmitFormButton>
</AuthForm>
)
};
這是我的 firebase.js 檔案
import { initializeApp } from "firebase/app";
import {
getAuth,
onAuthStateChanged,
signInWithPopup,
signOut,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
} from 'firebase/auth';
const firebaseConfig = {
apiKey: ****,
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth();
auth.useDeviceLanguage();
// Auth functions
export function signUpUser(email, password) {
if (password.length < 6) {
alert('Password is too short');
return;
};
??createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
alert('Signed up Successfully', user);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
alert(errorMessage);
});
};
uj5u.com熱心網友回復：
onClick={signUpUser(email,password)}signUpUser無論是否單擊，
這里都會在渲染期間呼叫 。
如果它以這種方式作業并且不起作用，
onClick={() => signUpUser(email,password)}
那么沒有其他選擇，但您SubmitFormButton不會觸發onClick. 也許它根本沒有傳遞給 DOM。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396985.html
標籤：javascript 反应 承诺 Firebase 身份验证 点击