[英]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.