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

Question

I would like to open a modal with a click. The button is visible on my page, but unfortunately the modal does not open when you click it. Unfortunately I haven't found a solution yet how I can solve the problem.

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

According to this MDB page , the property used to dictate whether or not a modal is being shown is not show , but rather isOpen . Change

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

To

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