Reactjs-onChange不斷清除輸入框，使其無法輸入內容

我正在嘗試實作登錄/注冊表單，但是實作 onChange 來設定電子郵件/密碼的狀態使得輸入在 onChange 中不斷被清除。這顯然不是預期的結果，但我還沒有在網上看到任何關于它的資訊。這是注冊表單的代碼。

import { React, useState } from "react";
import styled from "styled-components";
import { createUserWithEmailAndPassword } from "firebase/auth"
import { Link } from "react-router-dom";
import { auth } from '../Config/firebase.js';

// Import Assets //
import LogoPlaceholder from "../Assets/Login/LogoPlaceholder.png";

function LoginForm(props) {
  
const LoginFormContainer = styled.div`
    width: 80vw;
    margin-left: 10vw;
    height: 80vh;
    margin-top: 10vh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;

const Logo = styled.img`
    margin-top: -150px;
    width: 325px;
    height: 180px;
`;

const SplashHeader = styled.h1`
    font-weight: 400;
    color: #333;
    word-spacing: 5px;
    letter-spacing: 0.5px;
    font-size: 3em;
    margin-top: 20px;
    text-align: center;
`;

const SplashText = styled.p`
    font-weight: 300;
    color: #333;
    word-spacing: 2px;
    letter-spacing: 0.5px;
    font-size: 1.5em;
    margin-top: 5px;
    width: 450px;
    text-align: center;
`;

const InputBox = styled.input.attrs(props => ({
    type: props.type || 'text', 
}))`
    width: 300px;
    height: 50px;
    font-size: 18px;
    padding-left: 10px;
    margin-top: 20px;
    border: 0;
    outline: 0;
    color: #fff;
    border-radius: 5px;
    background-color: #333;
    border-bottom: 3px solid transparent;
    transition: all 0.5s ease-in-out;

    &:focus {
        background-color: #3f3f3f;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        cursor: default;
        border-bottom: 3px solid #0026ED;
    }

    &::placeholder {
        color: #fafafa;
    }

    &:hover {
        cursor: pointer;
    }

    &:first-of-type {
        margin-bottom: 15px;
    }
`;

const SignupBtn = styled.button`
width: 125px;
height: 50px;
margin-top: 10px;
border: 0;
outline: 0;
border-radius: 5px;
margin-left: 13px;
transition: all 0.5s ease-in-out;
font-size: 18px;
background-color: #333;
color: #fafafa;
border: 3px solid transparent;

&:hover {
    border-radius: 10px;
    background-color: #3f3f3f;
    border: 3px solid #0026ED;
    cursor: pointer;
}
`;

const ButtonContainer = styled.div`
    width: 300px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
`;

const StyledLink = styled(Link)` 
    color: #fafafa;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
    border-bottom: 3px solid transparent;
    transition: all 0.5s ease-in-out;

    &:hover {
        cursor: pointer;
    }
`;

const StyledLinkDark = styled(Link)`
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 300;
    border-bottom: 3px solid transparent;
    transition: all 0.5s ease-in-out;

    &:hover {
        cursor: pointer;
    }
`;

const BackToLogin = styled.div`
    color: #000;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 125px;
    justify-content: center;
    margin-left: 12px;
`;

const [registerEmail, setRegisterEmail] = useState("");
const [registerPassword, setRegisterPassword] = useState("");

const register = async () => {
    try {
        const user = await createUserWithEmailAndPassword(auth, registerEmail, registerPassword)
        console.log(user)
    } catch (error) {
        console.log(error.message);
    }
};

return(  
  <LoginFormContainer>
    <Logo src={LogoPlaceholder} alt="UDM Logo" />
    <SplashHeader>Uni-Deadline Manager Signup</SplashHeader>
    <SplashText>Sign up to Uni-Deadline Manager to keep track of all your unit deadlines in one place!</SplashText>
    <InputBox placeholder="Email" />
    <input type="text"  placeholder="email" onChange={(event) => {setRegisterEmail(event.target.value)}} />
    <InputBox name="password" onChange={(event) => {setRegisterPassword(event.target.value)}} marginTop="40px" placeholder="Password" type="password" />
    <InputBox name="password" placeholder="Confirm Password" type="password" />
    <ButtonContainer>
        <SignupBtn onClick={register}>
            <StyledLink to="/Signup">Signup</StyledLink>
        </SignupBtn>
    </ButtonContainer>
    <BackToLogin>
        <StyledLinkDark to="/">Back to login</StyledLinkDark>
    </BackToLogin>
  </LoginFormContainer>
)
}
export default LoginForm;

對此（據我所知）相對未記錄的問題的任何幫助將不勝感激。

uj5u.com熱心網友回復：

你這里有兩個問題。

首先，您不使用欄位的value屬性input，這將允許您添加字符：

<input type="text" value={registerEmail} placeholder="email" onChange={(event) => {setRegisterEmail(event.target.value)}} />

其次，正如您在評論中所說，您輸入的每個字符后都會失去焦點。發生這種情況是因為每次鍵入字符時 react 都會重新渲染螢屏。react 這樣做的原因是因為您在函式體內定義了組件（特別是我認為InputBox是導致這種情況的原因），這使得 react 每次更改時都會重新渲染它們。

解決方案是將這些組件的定義移到函式范圍之外。

//Place them here
const LoginFormContainer = styled.div`
...`

function LoginForm(props) {
    //Remove from here
    const LoginFormContainer = styled.div`
    ...`

uj5u.com熱心網友回復：

看起來您沒有在 <input 標簽上設定“值”。您需要將其設定為狀態。

<輸入值={registerEmail} onChange=...

標籤：

上一篇：簽入Angular/Ionic應用程式后，復選框欄位立即取消選中

下一篇：Firestore：顯示城市 半徑中的所有資料