简体   繁体   English

React-Bootstrap 2022:单击 X 按钮时模态框不会关闭

[英]React-Bootstrap 2022: Modal Will Not Close When X button clicked

I have been designing an web app using react and react bootstrap.我一直在使用 React 和 React Bootstrap 设计一个 web 应用程序。 In my case, I use a cdn to load the bootstrap css files and bootstrap.min.js in addition to using the react-bootstrap library.就我而言,除了使用react-bootstrap库外,我还使用 cdn 加载 bootstrap css 文件和 bootstrap.min.js。

Everything works fine, except for the close button.一切正常,除了关闭按钮。 The close button seems to do nothing at all.关闭按钮似乎什么都不做。

MessageBox.js:消息框.js:

import Modal from 'react-bootstrap/Modal'
import {useState} from 'react'

function MessageBoxComponent(title,content,showState,closeCallback){
    return (
        <Modal show={showState} onHide={closeCallback}>
            <Modal.Header closeButton>
                <Modal.Title>{title}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                {content}
            </Modal.Body>
        </Modal>
    )
}

function useMessageBox(closeCallback = ()=>{}){
    const [showState, setShowState] = useState(false)
    const [title, setTitle] = useState("")
    const [content, setContent] = useState("")
    const showMessageBox = (title,content)=>{
        setTitle(title)
        setContent(content)
        setShowState(true)
    }
    const closeMessageBox = () => {
        setShowState(false)
    }
    const component = MessageBoxComponent(title,content,showState,closeCallback)
    return [component, showMessageBox,closeMessageBox]
}

export default useMessageBox

example.js:示例.js:

import useMessageBox from '../Utils/MessageBox'

function MessageBoxExample(){
    const [messageBoxComponent, showMessageBox, closeMessageBox] = useMessageBox()
    const handleClick = (evt) => {
        showMessageBox("This is the title",<span>This is the body</span>)
    }
    return <>
        <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-12'>
                    <button className='btn btn-primary' onClick={handleClick}>Open Message Box</button>
                </div>
            </div>
        </div>
        {messageBoxComponent}
        </>
}

You have to add a function for the onHide modal prop that will change the showState value您必须为将更改 showState 值的 onHide 模态道具添加 function

<Modal show={showState} onHide={() => {
   setShowState(false)
   closeCallback()
}}>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM