我一直在設計一個使用反應和反應引導程式的網路應用程式。就我而言，除了使用react-bootstrap庫之外，我還使用 cdn 加載引導程式 css 檔案和 bootstrap.min.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
示例.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}
</>
}
uj5u.com熱心網友回復：
您必須為 onHide 模態道具添加一個函式，該函式將更改 showState 值
<Modal show={showState} onHide={() => {
setShowState(false)
closeCallback()
}}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/533729.html
上一篇：使用VBA根據周數插入行
下一篇：如何每2個字符拆分字串