无需单击即可在 ReactJS 中打开模态答案

【问题标题】：Open a Modal in ReactJS without click无需单击即可在 ReactJS 中打开模态
【发布时间】：2020-11-17 12:39:19
【问题描述】：

我正在使用以下代码在 reactJS 中打开一个 Modal，无需任何点击：

window.$('#codeEmbedModal').modal('show')

但它没有打开模态框。我在这里做错什么了吗？我在查看these answers 之一后使用了这种方式

【问题讨论】：

codepen.io/rajrs/pen/dMowNx 试试这个。

标签： javascript reactjs modal-dialog react-modal

【解决方案1】：

我猜你正在使用引导模式。那么您需要使用 jQuery 在悬停或加载时触发模态。

$("#button").hover(function () {
    $('#modal').modal({
        show: true,
        backdrop: false
    })
});

也改变模态的css

position: fixed; to position: absolute;

并根据需要更改 css。

【讨论】：

【解决方案2】：

函数示例（）{ const [show, setShow] = useState(false);

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

返回 ( 启动演示模式

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

); }

渲染();

【讨论】：