Javascript 类将不会使用classList.remove（）删除？

我试图在单击“打开”类时将其添加到，并在再次单击时将其删除。在devtools中，我可以看到添加了“open”，但当我再次单击它时，它将不会删除。是否有不同的方法来删除类

import React, { useEffect } from 'react';
import './menu.styles.scss';

function Menu({ handleSidebar }) {
  useEffect(() => {
    const menu = document.querySelector('.menu');
    let menuOpen = false;
    menu.addEventListener('click', () => {
      if (!menuOpen) {
        menu.classList.add('open');
        menuOpen = !menuOpen;
      } else {
        menu.classList.remove('open');
        menuOpen = !menuOpen;
      }
    });
  });
  return (
    <div className='menu' onClick={handleSidebar}>
      <div className='menu-btn'></div>
    </div>
  );
}

export default Menu;

---

您的代码将不会到达其他部分，因为您将false分配给menuOpen。因此，if条件将随时满足

您的代码将不会到达其他部分，因为您将false分配给menuOpen。因此，if条件将随时满足

最好使用useState来执行此操作……现在使用document.querySelector的方式与react无关

从“React”导入React，{useffect}； 导入“./menu.styles.scss”； 功能菜单{handleSidebar}{ const[open，setOpen]=useStatetrue 回来 } 导出默认菜单；

---

您最好使用useState来执行此操作……您现在使用document.querySelector的方式有点超出了react的范围

从“React”导入React，{useffect}； 导入“./menu.styles.scss”； 功能菜单{handleSidebar}{ const[open，setOpen]=useStatetrue 回来 } 导出默认菜单；

---

put let MENOOPEN=false；在UseEffect之外，您应该通过NPM签出可用的程序包，您尝试执行的操作是非反应性的。您应该使用状态来反映DOM中的更改。请费心阅读文档，我不能完全肯定地说，但我可以想象，对DOM的任何手动更改都会在下一次渲染时被覆盖；在UseEffect之外，您应该通过NPM签出可用的程序包，您尝试执行的操作是非反应性的。您应该使用状态来反映DOM中的更改。请费心阅读docsI不能完全确定，但我可以想象任何对DOM的手动更改都会在下一次渲染时被覆盖。这很有意义，谢谢。另外，由于我从父组件“handleSidebar”引入了另一个函数。我能有多个onClick事件吗？例如，{handleSidebar；setOpen！open；}}>我很困惑，因为如果我使用handleSidebar而不是handleSidebar，它会给我一个错误。我认为handleSidebar并不理想，因为它在每次组件渲染时都会运行函数，而不仅仅是在单击时？是的，从技术上讲，您可以通过编写它的方式来实现。不过有点乱。最好在组件中定义另一个函数，比如myOnClickFunction==>{handleSidebar；setOpen！open}，然后在返回的onClick中，执行onClick={myOnClickFunction}。不过，这只是一种文体选择，你写的应该很好。而且，如果我的答案对你有帮助，通常会打勾将其标记为答案。这有助于我获得所有人都喜欢的毫无意义的互联网积分。太好了，我很感激。我确实打了勾，应该能看到。有道理，谢谢。另外，由于我从父组件“handleSidebar”引入了另一个函数。我能有多个onClick事件吗？例如，{handleSidebar；setOpen！open；}}>我很困惑，因为如果我使用handleSidebar而不是handleSidebar，它会给我一个错误。我认为handleSidebar并不理想，因为它在每次组件渲染时都会运行函数，而不仅仅是在单击时？是的，从技术上讲，您可以通过编写它的方式来实现。不过有点乱。最好在组件中定义另一个函数，比如myOnClickFunction==>{handleSidebar；setOpen！open}，然后在返回的onClick中，执行onClick={myOnClickFunction}。不过，这只是一种文体选择，你写的应该很好。而且，如果我的答案对你有帮助，通常会打勾将其标记为答案。这有助于我获得所有人都喜欢的毫无意义的互联网积分。太好了，我很感激。我确实打了勾，应该能看到。