HTML 到 JSX 反应：addEventListener 到 onClick

Question

This needs to be changed from HTML to JSX.这需要从 HTML 更改为 JSX。 I also need help making this have "onClick" instead of the addEventListeners.我还需要帮助使其具有“onClick”而不是 addEventListeners。 Trying to put this into React, and it is not liking the addEventListeners whatsoever.试图将其放入 React 中，但它一点也不喜欢 addEventListeners。 It is a modal login from BULMA.它是来自 BULMA 的模式登录。 Here is the code: Please paste the solution with a description so I know how you changed it.这是代码：请粘贴带有说明的解决方案，以便我知道您是如何更改它的。

<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

Usually you would add the onClick attribute to the element and call a function - onClick={handleClick} .通常，您会将onClick属性添加到元素并调用函数 - onClick={handleClick} 。 So you can do this所以你可以这样做

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

which sets the elements onClick attribute.它设置元素的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