Question

我使用ReactJs和Bootstrap4。我有一个静态模式。我想在每次调用该函数时使用新数据触发模态。

对该函数进行分类的div元素：

<!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-WP57CBK');</script>
  <!-- End Google Tag Manager -->

showEvent函数：

 <div className="session rounded hover-light " data-toggle="modal" data-target="#sessionModal"  onClick={() => showEvent(session)}>

然后像这样返回dom的函数：

 const showEvent = (event = {}) => {
   return (
     <div className="modal fade" id="sessionModal" tabIndex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true">
       <div className="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
         <div className="modal-content">
           <div className="modal-header">...</div>
           <div className="modal-body">
             <h5 className="mb-4">
               <u>Title : <strong>{session.name}</strong></u>
             </h5>
           </div>
         </div> 
       </div>)

Answer 1

Miled您的功能是错误的！函数参数为event，但是您要使用{session.name}而不是{event.name}。只需更改它就可以了。

如何更新Bootstrap Modal内容？

1 个答案: