时间戳

首页 > 解决方案 > 类不会使用 classList.remove() 删除？

javascript - 类不会使用 classList.remove() 删除？

问题描述

我试图<div className='menu' onClick={handleSidebar}>在单击它时添加“打开”类，并在再次单击时删除。在 devtools 中，我可以看到添加了“打开”，但是当我再次单击它时，它不会删除。是否有不同的方法来删除类？

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;

标签： javascriptreactjs

解决方案

你最好用useState......你现在拥有它的方式document.querySelector是除了反应点之外。

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

function Menu({ handleSidebar }) {

  const [ open, setOpen ] = useState(true)

  return (

    <div className={`menu ${open ? 'open' : ''}`} onClick={setOpen(!open)}>
      <div className='menu-btn'></div>
    </div>

  )

}

export default Menu;

推荐阅读