时间戳

首页 > 解决方案 > HTML to JSX REACT: addEventListener to onClick

reactjs - HTML to JSX REACT: addEventListener to onClick

问题描述

这需要从 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>

标签： reactjsjsxaddeventlistener

解决方案

通常您会将onClick属性添加到元素并调用函数 - onClick={handleClick}。所以你可以这样做

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

设置元素onClick属性。

推荐阅读