React + Bootstrap 模态问题

Question

我正在尝试使用 react-bootstrap 放置一个模态对话框，但遇到了问题。

我有一个由一堆按钮组成的“HintComponent”

  <div className="col-5 d-grid gap-2 borderGeneral">
    <button className="buttonGeneral" >Label here</button>
    <button className="buttonGeneral">SUMMARY</button>
  </div>

我想在单击按钮时启动模态对话框。

查看 react-bootstrap 站点，我有以下内容（直接从该站点获取）

import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import render from 'react-dom';

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

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render(<Example />);

我的问题是 - 如何从 HintComponent 调用模态框？如果我尝试导入 Modal（在本例中）并调用它，我会收到有关模块没有导出的警告。

谁能给我提示？

Answer 1

您好，非常简单，您需要在 HintComponent 中使用此组件并传递道具 showModal={true} 但在此之前，您需要在模态组件中接收该道具并将其设置为使用React.useEffect

因此您的最终代码将如下所示：

模态组件

import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import render from 'react-dom';

function Example(props) {
  const {showModal = false, onClose = ()=>{}} = props;
  const [show, setShow] = useState(showModal);

  React.useEffect(()=>{
    setShow(showModal);
  },[showModal]);

  const handleClose = () => {
   setShow(false);
   // just to have custom function for modal close which will be used can be used in HintComponent maybe you want to perform somehting else after modal close.
   typeof onClose === 'function' && onClose();
  };
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render(<Example />);

我建议不要在其组件中管理 Modal 可见性，而是在您的案例 HintComponent 中从父组件控制它。

React + Bootstrap 模态问题

React + Bootstrap modal questions

reactjs

react-bootstrap

模态组件