为什么我的模式在点击后没有出现？

Question

我正在尝试添加一个按钮，该按钮将打开一个模式，用户可以在其中填写他们的信息。但我有一个问题。我从 bootstrap 插入了一个模式，但它不起作用。该按钮出现，但点击后没有任何显示。我已经尝试了我所知道的一切，也尝试了谷歌搜索，但互联网上没有任何帮助。我是 React 的新手，我不知道问题出在哪里，我还能做些什么。这是我的代码片段：

function AddNew(props) {
  const [show, setShow] = useState(false);

  return (
<>
  <Button variant="primary" onClick={() => setShow(true)} id="add-patient">
    Pridėti
  </Button>
  <Modal
    show={show}
    onHide={() => setShow(false)}
    dialogClassName="modal-90w"
    aria-labelledby="add-new"
  >
    <Modal.Header closeButton>
      <Modal.Title id="add-new">Custom Modal Styling</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <p>...</p>
    </Modal.Body>
  </Modal>
</>
  );
}

这就是全部代码：Code

请帮帮我！

Answer 1

这是一个工作示例：https://codesandbox.io/s/cranky-yonath-ui7q3

我只是将 animation={false} 作为道具添加到 Modal 组件以使其工作（可能缺少一些 css 文件来使动画工作）：

<Modal
        show={show}
        onHide={() => setShow(false)}
        dialogClassName="modal-90w"
        aria-labelledby="add-new"
        animation={false}
      >

编辑：这实际上是原因，添加 bootstrap 作为依赖项并 import "bootstrap/dist/css/bootstrap.min.css"; 在您的代码中 (follow the installation instructions here)

Answer 2

请阅读react-bootstrap introduction。您缺少 bootstrap css，这是 react-bootstrap 工作所必需的。

您需要安装bootstrap

npm install bootstrap

然后将其导入您的 index.js 文件

import 'bootstrap/dist/css/bootstrap.min.css';

为什么我的模式在点击后没有出现？

Why my modal is not showing up after click?

javascript

modal-dialog

popup

bootstrap-modal

reactjs