时间戳

首页 > 解决方案 > React - 为什么 addEventListener 不起作用？

reactjs - React - 为什么 addEventListener 不起作用？

问题描述

我正在尝试使用 GatsbyJS 创建一个网站，每当我需要设置一个 onClick 事件来切换我的一个组件中的一个类时，我就会陷入困境。作为 react 和 gatsby 的初学者，我很难做到。

所以本质上我想在 React/GatsbyJS 中编写以下 JS 代码：

const hamburger = document.querySelector('.burger_menur');
hamburger.addEventListener('click', function(){
    this.classList.toggle('open');
});

以下代码是我当前在 Gatsby 组件中的代码。不得不说，我是用GSAP做动画的。

这是我的代码：

import React from 'react';
import { Tween, Timeline } from 'react-gsap';
import '../styles/burger.scss'


const Burger = () => (

  <Timeline
    target={

        <div className='burger'>
            <div className='burger_menu'>
                <div className='bar half start'></div>
                <div className='bar'></div>
                <div className='bar half end'></div>
            </div>
        </div>

    }
  >
    <Tween from={{ opacity: '0', marginRight: '0rem' }} to={{ opacity: '1', marginRight: '5rem' }} ease="Back.easeOut" delay={2}/>

  </Timeline>
);


export default Burger

希望有人可以帮助我解决这个问题。

标签： reactjsonclickaddeventlistenergatsby

解决方案

如果您打算使用 React，请不要直接操作 DOM。

更具体地说，不要尝试直接作用于 React 生成的 DOM 的任何部分。

在这里，您使用普通的 DOM 操作将您的事件附加到由 React 生成的元素（另外，您的类名中有一个错字）：

const hamburger = document.querySelector('.burger_menur');
hamburger.addEventListener('click', function(){
    this.classList.toggle('open');
});

问题是，虽然它有时会起作用，但React 会在它认为有必要时为你的菜单重新生成新元素，而你的事件监听器将会丢失。

你必须用“反应方式”来做：

...
   <div className='burger'>
       <div className={`burger_menu ${this.state.isOpen? ' open' : ''}`} onClick={() => this.setState({ isOpen: !isOpen })}>
           <div className='bar half start'></div>
           <div className='bar'></div>
           <div className='bar half end'></div>
       </div>
   </div>
...

不要忘记初始化你的状态{ isOpen: false }

单击 div 将切换this.state.isOpen，用于决定类名是'burger_menu'还是'burger_menu open'。

注意：当类列表变长时，有更优雅的方法可以使用它们，但是您的组件很简单，并且为了清楚起见，字符串模板将不仅仅如此。

如果这听起来令人困惑，请通读官方教程Intro To React，它解释得很好，涵盖了这里需要的所有内容。

如果您已经对此感到满意并想了解更多关于在 React 中处理事件的信息，那么您可以再次阅读文档：处理事件

推荐阅读