React模态框点击Register按钮后立即关闭问题求助

核心原因：表单默认提交行为 #

你的Register按钮嵌套在<form>标签内部，HTML中按钮默认的type是submit，点击时会触发表单的提交动作，导致页面重新加载，组件状态被重置为初始值（openModal变回false），这就是模态框只显示一秒就消失的原因。

修复步骤： #

1. 修改Home.js中的Register按钮

给按钮添加type="button"属性，阻止其触发表单提交：

<button className="sign-up" type="button" onClick={() => {
    setOpenModal(true);
}}>Register</button>

2. 修复Modal.js中的缺失代码

你的Modal组件存在两处未定义内容，会导致控制台报错：

• 未声明agreement状态，需要添加useState定义：

import "./Modal.css";
import {useState} from "react";

function Modal({ setOpenModals }) {
    // 补充agreement状态定义
    const [agreement, setAgreement] = useState(false);

    const handleChange = (event) => {
        console.log("Checked: ", event.target.checked)
        setAgreement(event.target.checked);
    }

    // 补充handleSubmit函数（如果需要实现注册逻辑），或者暂时移除调用
    const handleSubmit = () => {
        // 这里添加你的注册逻辑，比如表单验证、提交接口等
        console.log("执行注册操作");
    }

    return(
        // ... 原有Modal内容
    )
}

• 未定义handleSubmit函数，要么实现该函数的逻辑，要么删除按钮中的handleSubmit()调用。

3. 可选：统一props命名（优化）

Home组件中传递的是setOpenModal，但Modal组件接收的props是setOpenModals（多了个s），虽然不影响功能，但统一命名会让代码更清晰：

• Home.js中修改Modal的props：

{openModal && <Modal setOpenModal={setOpenModal}/>}

• Modal.js中修改props接收：

function Modal({ setOpenModal }) {
    // ... 内部调用改为setOpenModal(false)
}

验证修改效果 #

完成以上修改后，点击Register按钮时，表单不会再提交，openModal状态会保持为true，模态框就能正常显示了。

内容的提问来源于stack exchange，提问作者HLT