HTML 到 JSX 反應：addEventListener 到 onClick

Question

這需要從 HTML 更改為 JSX。 我還需要幫助使其具有“onClick”而不是 addEventListeners。 試圖將其放入 React 中，但它一點也不喜歡 addEventListeners。 它是來自 BULMA 的模式登錄。 這是代碼：請粘貼帶有說明的解決方案，以便我知道您是如何更改它的。

<body> 
<div class='container'> 
   <div class='columns is-mobile is-centered'> 
   <div class='column is-4'> 
       <div class='has-text-centered'> 
       <button class="button is-primary"
               id='btn'> 
           Login form modal 
       </button> 
       </div> 
       <div class="modal"> 
       <div class="modal-background"></div> 
       <div class="modal-content"> 
           <div class="box"> 
           <div> 
               <h1 class='title has-text-centered'> 
               Login 
               </h1> 
           </div> 
           <form action='#' method='post'> 
               <div class='field'> 
               <label class='label'
                       id='username'> 
                   Username 
               </label> 
               <div class='control has-icons-left'> 
                   <input class='input'
                       type='text'
                       for='username'
                       placeholder='Username'> 
                   <span class="icon is-small is-left"> 
                   <i class="fas fa-user"></i> 
                   </span> 
               </div> 
               </div> 

               <div class='field'> 
               <label class='label'
                       id='password'> 
                   Password 
               </label> 
               <div class='control has-icons-left'> 
                   <input class='input'
                       type='password'
                       for='password'
                       placeholder='Password'> 
                   <span class="icon is-small is-left"> 
                   <i class="fas fa-lock"></i> 
                   </span> 
               </div> 

               <div class='buttons'> 
                   <button class='button is-link'> 
                   Login 
                   </button> 
               </div> 
               </div> 
           </form> 
           </div> 
       </div> 
       <button class="modal-close is-large"
               aria-label="close"> 
           Model 
       </button> 
       </div> 
   </div> 
   </div> 
</div> 

<script> 
   const modal = document.querySelector('.modal'); 
   const btn = document.querySelector('#btn') 
   const close = document.querySelector('.modal-close') 

   btn.addEventListener('click', 
                       function () { 
   modal.style.display = 'block' 
   }) 

   close.addEventListener('click', 
                       function () { 
   modal.style.display = 'none' 
   }) 

   window.addEventListener('click', 
                           function (event) { 
   if (event.target.className === 
       'modal-background') { 
       modal.style.display = 'none' 
   } 
   }) 
</script> 
</body>

Answer 1

通常，您會將onClick屬性添加到元素並調用函數 - onClick={handleClick} 。 所以你可以這樣做

btn.onClick = function () { 
  modal.style.display = 'block'
}

它設置元素的onClick屬性。

HTML 到 JSX 反應：addEventListener 到 onClick

問題描述

1 個解決方案

解決方案1
0 2020-11-16 19:35:15

HTML 到 JSX 反應：addEventListener 到 onClick

問題描述

1 個解決方案

解決方案1 0 2020-11-16 19:35:15

解決方案1
0 2020-11-16 19:35:15