Question

我正在尝试添加一个按钮，该按钮将打开一个模式，用户可以在其中填充其信息。但是我有一个问题。我从引导程序中插入了一个模式，但是它不起作用。该按钮出现，但单击后不显示任何内容。我尝试了我所知道的一切，并尝试使用谷歌搜索，但互联网上没有任何帮助。我是新来的人，我不知道问题出在哪里，我还能做些什么。这是我的代码的一个片段：

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}
      >

编辑：这实际上是原因，将引导程序添加为依赖项，然后您的代码中的import "bootstrap/dist/css/bootstrap.min.css";（follow the installation instructions here）

Answer 2

请阅读react-bootstrap introduction。您缺少启动反应工作所需的引导CSS。

您需要安装引导程序

npm install bootstrap

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

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

为什么点击后我的模态不显示？

2 个答案: