时间戳

首页 > 解决方案 > React.js mdbottstrap 通过点击显示模态

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

标签： javascriptreactjsreact-hooksbootstrap-modalmdbootstrap

解决方案

根据这个 MDB 页面，用于指示是否显示模式的属性不是show，而是isOpen。改变

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

至

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

推荐阅读