Question

我试图使用GatsbyJS创建一个网站，每当我需要设置onClick事件来切换我的组件之一中的类时，我都会陷入困境。作为React和Gatsby的初学者，我很难做到这一点。

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

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

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

这是我的代码：

{{1}}

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

Answer 1

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

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

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

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

问题是，尽管有时可能会起作用，但它认为必要时 React将为您的菜单重新生成新元素，并且事件监听器将丢失。< / p>

您必须按照“反应方式”进行操作：

...
   <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中处理事件的信息，请再次阅读文档：Handling Events

反应-为什么addEventListener不起作用？

1 个答案: