Question

我有一个带函数示例的js文件。我在另一个函数库中调用该函数。我现在需要的是打开我的模式，而无需单击按钮。它在单击按钮时效果很好，但是在我的情况下不是我所需要的。任何解决方案如何在不单击此按钮的情况下在函数调用中显示此模式？

function Example() {

  return (
    <>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
      </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

Answer 1

只需定义一个状态变量，将其命名为showModal，用false初始化它，然后在代码中显示或隐藏基于showModal为true或{ {1}}。

这样，当您想“手动”显示它时，您需要做的就是将false切换为showModal，就像这样：

true

您需要一些反应知识，以便理解我的回答：）

Answer 2

$("#exampleModal").modal('show');

尝试在显示模态的函数中调用此函数。也不要忘记导入。调用此函数之前的jQuery。您可以在主页中导入jquery，一切都可以正常工作

Answer 3

我已经通过使用React Hooks解决了这个问题。感谢您的答复。快乐黑客：）

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

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

  return (
    <>
      <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>
    </>
  );
}

在函数调用中打开模态

3 个答案: