Javascript React.js mdbottstrap显示模式，单击

我想打开一个点击模式。该按钮在我的页面上可见，但不幸的是，当您单击该按钮时，该模式不会打开。 不幸的是，我还没有找到解决问题的方法

function ModalPage(props) {
    const [username, setUsername] = useState();
    const [password, setPassword] = useState();
    const [showModal, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
return (
  <MDBContainer>
    <MDBBtn rounded onClick={handleShow}>+</MDBBtn>
    <MDBModal show={showModal} onHide={handleClose}> 
      <MDBModalHeader className="text-center" titleClass="w-100 font-weight-bold">Data Input</MDBModalHeader>
      <MDBModalBody>
        <form className="mx-3 grey-text">
          <MDBInput label="ID" group type="text" validate />
          <MDBInput label="Username" group type="email" validate error="wrong" success="right" 
          onChange={(evt) => setUsername(evt.target.value)}
          />
          <MDBInput label="Password" group type="text" 
          onChange={(evt) => setPassword(evt.target.value)}
          />
          <MDBInput type="textarea" rows="2" label="Your message" />
        </form>
      </MDBModalBody>
      <MDBModalFooter className="justify-content-center">
        <MDBBtn color="unique" onClick={handleClose}>Send
          <MDBIcon far icon="paper-plane" className="ml-2" />
        </MDBBtn>
      </MDBModalFooter>
    </MDBModal>
  </MDBContainer>
);


}

export default withRouter(ModalPage);

功能模块页面（道具）{
const[username，setUsername]=useState（）；
const[password，setPassword]=useState（）；
const[showmodel，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
返回(
+
数据输入
setUsername（evt.target.value）}
/>
setPassword（evt.target.value）}
/>
发送
);
}
使用路由器导出默认值（ModalPage）；

根据，用于指示是否显示模态的属性不是

show

，而是

isOpen

。改变

<MDBModal show={showModal} onHide={handleClose}>

到

<MDBModal isOpen={showModal} onHide={handleClose}>