按钮 onclick 刷新页面而不是将状态设置为 false答案

【问题标题】：button onclick refresh page instead of set state to false按钮 onclick 刷新页面而不是将状态设置为 false
【发布时间】：2021-10-01 23:38:09
【问题描述】：

我正在开发一个电子商务应用程序，我正在登录。

我希望登录是一个弹出框，这样当用户点击登录按钮时，对话框就会出现，而当用户点击 x 按钮时，对话框就会消失。

除了关闭 (x) 按钮外，其他功能都很好。

当它被点击时，它会刷新页面，而不是将 setOpenLoginModal 设置为 false。

我创建了一个可重用的模态，然后将其导入到 LoginModal.js，然后再传递给 App.js。

Modal.js

const Modal = ({open, children, handleSubmit}) => {
        if(!open) return null
        return ReactDom.createPortal(
            <>
            <form action="" onSubmit={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}) => {
    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 />

        </div>
    )
    }

     export default LoginModal

App.js

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


export default App

【问题讨论】：

标签： reactjs button modal-dialog

【解决方案1】：

这个问题可能与您的表单有关，我认为您不会阻止默认设置。即使您说action=""，它仍然会尝试像获取操作一样处理它，这会导致它刷新页面。

const Modal = ({ open, children, handleSubmit }) => {
    if (!open) return null

    const submit = (e) => {
        e.preventDefault()
        handleSubmit()
    }
    return ReactDom.createPortal(
        <>
            <form action="" onSubmit={submit}>
                <div style={OVERLAY_STYLE}>
                    <div style={MODAL_STYLES}>{children}</div>
                </div>
            </form>
        </>,
        document.getElementById('portal')
    )
}

export default Modal

【讨论】：

谢谢你让我使用 e.preventDefault
如果解决了，请确保接受该问题，以便其他可能遇到相同问题的人知道它已解决

【解决方案2】：

我可以看到您将错误的 setState 处理程序传递给子组件。您必须在 App.js 文件中将 setOpenRegisterModal 更改为 setOpenLoginModal

【讨论】：