React.js mdbottstrap 通过点击显示模态

Question

我想通过单击打开模式。该按钮在我的页面上可见，但不幸的是，当您单击它时，模式不会打开。不幸的是，我还没有找到解决方案，我该如何解决这个问题。

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);

Answer 1

根据 this MDB page，用于指示是否显示模态的属性不是 show，而是 isOpen。变化

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

到

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

React.js mdbottstrap 通过点击显示模态

React.js mdbottstrap show Modal with click

javascript

reactjs

react-hooks

bootstrap-modal

mdbootstrap