React登录弹窗关闭按钮点击刷新页面 未触发setOpenLoginModal设为false

以下是导致点击关闭按钮页面刷新的核心问题及修复代码：

• App组件调用LoginModal时属性传递错误，未传入setOpenLoginModal，反而传入了不存在的setOpenRegisterModal，导致LoginModal内调用关闭方法时找不到对应函数
• Modal组件内的form标签设置了action=""，空action会触发表单默认提交行为，跳转到当前页面导致刷新
• LoginModal内传入Modal的handleSubmit方法未定义，触发表单提交时会报错
• 原代码多处遗漏基础依赖引入（如useState、ReactDom），运行时会抛出语法错误

修复后的App.js #

import { useState } from 'react';
import LoginModal from '../Components/LoginModal';
const App = () => {
  const [openLoginModal, setOpenLoginModal] = useState(false)     
  return (
    <div>
      {
        openLoginModal && (
          <LoginModal openLoginModal={openLoginModal} setOpenLoginModal={setOpenLoginModal}  />
        )
      }
       <div className="right-navs">
           <button onClick={() => setOpenLoginModal(true)} className="btn btn-primary">
                      LOGIN
            </button>
      </div>
    </div>
  )
}

export default App

修复后的Modal.js #

import ReactDom from 'react-dom';
const Modal = ({open, children, handleSubmit}) => {
  if(!open) return null
  return ReactDom.createPortal(
    <>
    <form onSubmit={(e) => {
      e.preventDefault(); // 阻止表单默认提交刷新行为
      handleSubmit?.();
    }}>
      <div style={OVERLAY_STYLE}>
          <div style={MODAL_STYLES}>
              {children}
          </div> 
      </div>
    </form>
    </>,
    document.getElementById('portal')
  )
}

export default Modal

修复后的LoginModal.js #

import Modal from './Modal'
const LoginModal = ({openLoginModal, setOpenLoginModal}) => {
  // 补充登录提交逻辑即可
  const handleSubmit = () => {
    console.log('执行登录请求')
  }
  return (
    <div>
      <Modal open={openLoginModal} handleSubmit={handleSubmit}>
                  
      <div className="d-flex justify-content-center">
          <div>
              <h4 className="head">eTranzact eCommerce</h4>
              <h6 className="sub-heading">Create an account to list your own product</h6>
          </div>
          <div>
              <h2 style={{position: 'absolute', right: '2em'}}>
              <button className="close" type="button" onClick={() => setOpenLoginModal(false)}>x</button>
              </h2>
          </div>
      </div>
      <hr />
      {/* 补充账号、密码输入框、登录提交按钮等表单内容 */}
      </Modal>
    </div>
  )
}

export default LoginModal

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