Javascript React函数组件重新呈现，单击'；提交'；按钮

下面的代码是我的Login.js函数组件，位于React中

在我的

单击“提交”后，组件将重新渲染并记录：


从“React”导入{React，useRef，useffect，useState}；
从“react bootstrap”导入{Form，Button，Container}；
导出默认函数登录（）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const credentials=useRef（{e:'defaulut email'，p:'default password'}）
console.log（'\n'）
控制台日志（“重新呈现”）；
控制台日志（“电子邮件：”，电子邮件）；
console.log（“密码：”，密码）；
console.log（credentials.current）
const handleLogin=（emaill，passwordd）=>{
控制台日志（“电子邮件：”，emaill）；
console.log（“密码：”，passwordd）；
credentials.current.e=电子邮件；
credentials.current.p=密码；
};
返回(
电子邮件地址
setEmail（e.target.value）}
/>
我们永远不会与其他人共享您的电子邮件。
密码
setPassword（e.target.value）}
/>
{
handleLogin（电子邮件、密码）；
}}
>
提交
);
}
我建议您将submit按钮的处理程序重构为具有
preventDefault
的处理程序。类似于：
onClick={（ev）=>{ev.preventDefault（）；…}
。在提交表单时，您似乎正在重新加载整个页面。@aleksxor嘿，您刚刚很容易地解决了我的4hr问题！非常感谢！它成功了！
import { React, useRef, useEffect, useState } from "react";
import { Form, Button, Container } from "react-bootstrap";

export default function Login() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const credentials = useRef({e:'defaulut email', p:'default password'})

    console.log('\n')
    console.log("re-render");
    console.log("email:", email);
    console.log("password:", password);

    console.log(credentials.current)

    const handleLogin = (emaill, passwordd) => {
        console.log("email:", emaill);
        console.log("password:", passwordd);

        credentials.current.e = email;
        credentials.current.p = password;

    };

    return (
        <Container className="mt-5">
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control
                        type="email"
                        placeholder="Enter email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                    <Form.Text className="text-muted">
                        We'll never share your email with anyone else.
                    </Form.Text>
                </Form.Group>
                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </Form.Group>
                <Button
                    variant="primary"
                    type="submit"
                    onClick={() => {
                        handleLogin(email, password);
                    }}
                    >
                    Submit
                </Button>
            </Form>
        </Container>
    );
}