函数调用时打开模态

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或false的方式显示或隐藏模式。

这样，当您想“手动”显示它时，只需将showModal切换为true，就像这样：

this.setState({showModal: true});

尽管您需要一些反应知识，才能理解我的回答：）

Answer 2

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

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

Answer 3

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