为什么我不能在输入文本字段中输入？

Question

我有两个输入表单 div。 单击注册按钮后，我想显示用户可以确认注册的第二个 div。 在 RegisterFormInputs 函数中的代码位于注册 div 之前，我能够在输入字段中输入内容。 然后我将它移到一个单独的函数中，以便能够显示和隐藏 div。 现在我不能在输入中写任何东西。 为什么会这样？ 我该如何解决这个问题？

function RegisterForm() {
    const [registerInputValues, setRegisterInputValues] = useState({
        email: '', password: ''
    });

    const [showRegisterForm, setShowRegisterForm] = useState(true);
    const [showRegisterVerificationForm, setShowRegisterVerificationForm] = useState(false);

    const handleRegisterOnChange = event => {
        const { name, value } = event.target;
        setRegisterInputValues({ ...registerInputValues, [name]: value });
    };

    const register = () => {
        studentsService.registerStudent(registerInputValues)
            .then(response => {
                console.log(response);
            })
            .catch(e => {
                console.log(e);
            });
        setShowRegisterForm(false);
        setShowRegisterVerificationForm(true);
    }

    const confirmRegistration = () => {
        studentsService.confirmRegistration(confirmationToken)
        .then(response => {console.log(confirmationToken, response)
        })
        .catch(e => {console.log(e); alert(e.response.data);});
    }

    const RegisterFormInputs = () => {
        return <div>
            <h2 className="loginElement">Create profile</h2>
            <label className="loginElement">
                <span className="loginElement">Email</span>
                <input type="email" name="email" className="loginElement" onChange={handleRegisterOnChange} />
            </label>
            <label className="loginElement">
                <span className="loginElement">Password</span>
                <input type="password" name="password" className="loginElement" onChange={handleRegisterOnChange} />
            </label>
            <button type="button" className="submit" onClick={register}>Register</button>
        </div>
    }

    const RegisterVerificationForm = () => {
        return <div className="verify-registration">
            <h2 className="loginElement text-center">Activate your profile</h2>
            <div className="d-flex justify-content-center align-items-center">
                <TextField id="outlined-basic" label="Verification token" variant="outlined" onChange={handleTokenOnChange} />
                <Timer initialMinutes={10}/>
            </div>
            <div className="mt-3 text-center">
                <Button variant="contained" onClick={confirmRegistration}>Submit</Button>
            </div>
        </div>;
    }
    return (
        <>
            <div className="cont mt-5">
                <div className="sub-cont">
                    <div className="form sign-up">
                        {showRegisterForm ? <RegisterFormInputs /> : null}
                        {showRegisterVerificationForm ? <RegisterVerificationForm /> : null}
                    </div>
                </div>
            </div>
        </>
    )
}

export default RegisterForm;

Answer 1

我想您应该尝试控制输入的值，如下所示：

<input value={registerInputValues.email} type="email" name="email" className="loginElement" onChange={handleRegisterOnChange} />

Answer 2

我会在处理函数中使用 useRef() 并将注册/提交上的状态设置为 ref.current。 目前，每个输入更改都会导致重新渲染，这就是它如此跳跃的原因。

    const formRef = useRef("")
    
    const handleRegisterOnChange = (event) => {
     formRef.current = event;
     //You can see the ref updates when typing, but without a re-render
     console.log(formRef.current);
    };

钻取到输入中的 event.target.value

<input
 type="email"
 name="email"
 className="loginElement"
 onChange={(event) => handleRegisterOnChange(event.target.value)}
/>

我没有所有内容的所有上下文，但在您的注册函数中可能是这样的：

 const register = () => {
    studentsService
      .registerStudent(formRef.current)
      

ETC.....