HTML to JSX REACT: addEventListener to onClick答案

【问题标题】：HTML to JSX REACT: addEventListener to onClickHTML to JSX REACT: addEventListener to onClick
【发布时间】：2020-11-16 19:20:48
【问题描述】：

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

【问题讨论】：

你基本上需要掌握一些 React 基础知识，这样你才能知道如何添加事件监听器，我建议你观看 YouTube 视频或学习 udemy 课程

标签： reactjs jsx addeventlistener

【解决方案1】：

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

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

其中设置元素onClick属性。

【讨论】：

TypeError: 无法设置属性 'onClick' of null
你是如何链接你的 jsx 和 html 的。如果您使用的是脚本标签，请确保它位于页面底部的</body> 标签之前。