我正在使用react,将bootstrap安装为节点包。 N.B.这是引导程序包,而不是react-bootstrap或reactstrap包。我已按照引导程序模式页面上的说明进行操作,以创建可通过按钮切换的模式。过去,这个确切的代码对我有用,但在React应用程序中不起作用,因此我有信心这就是问题所在。
按钮:
<button
type="button"
className="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal"
>
Login
</button>
模式:
<div
className="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Modal title
</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">...</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" className="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
按钮可以正确渲染,模态也可以渲染。手动切换模式可见性会给出适当的模式,因此我可以得出结论,问题出在切换可见性的按钮中。