Reactjs - onChange 不断清除输入框，使其无法输入内容答案

【问题标题】：Reactjs - onChange continually clears input boxes, making it impossible to type something inReactjs - onChange 不断清除输入框，使其无法输入内容
【发布时间】：2022-01-11 13:11:30
【问题描述】：

我正在尝试实现登录/注册表单，但是实现 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;

任何关于这个（据我所知）相对未记录的问题的帮助将不胜感激。

【问题讨论】：

试试<input type="text" value={registerEmail} placeholder="email" onChange={(event) => {setRegisterEmail(event.target.value)}} />
输入在更改时不断清除是什么意思？您可以将value 设置为value={registerEmail} 以查看用户输入的值。
@KaungKhantZaw 输入功能按预期（也就是您可以正常添加），直到添加 onChange。在此之后，在输入中键入单个字符会清除输入框，从而无法填写表单。
@sagi 虽然这个版本不会每次都清除输入，但它仍然限制我一次输入一个字符。有什么建议吗？
我不确定我是否理解您的意思。键入总是一次一个字符。你能澄清一下你的意思吗？

标签： javascript reactjs firebase

【解决方案1】：

这里有两个问题。

首先，您不要使用input 字段的value 属性，这将允许您添加字符：

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

其次，正如您在 cmets 中所说，您输入的每个字符都会失去焦点。发生这种情况是因为每次键入字符时 react 都会重新渲染屏幕。 react 这样做的原因是因为您在函数体中定义了组件（特别是我认为是 InputBox 导致了这种情况），这使得 react 每次更改时都会重新渲染它们。

解决方法是将这些组件的定义移到函数范围之外。

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

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

【讨论】：

【解决方案2】：

您似乎没有在

【讨论】：