如何在 React 中使用 Toggle 方法切换 CSS 样式

Question

这是带有 React-Bootstrap 的 Header 组件。我用纯 CSS 创建了一个菜单图标，但我想更改图标功能 onClick 但我收到错误 - TypeError: Cannot read property 'toggle' of undefined 。有什么方法我弄错了吗？好心检查。谢谢。

另外，有没有办法，我可以用 React Hooks 方法代替？

谢谢。

import styles from './Landing.module.css';
import './Landing.module.css';;

const openMenu = (open) => {
    open.classList.toggle('change');
};

 <Nav className="ml-auto">
  <div className={styles.allMenus}>
    <div className="menuIcon" onClick={openMenu}>
       <div className={styles.bar1}></div>
         <div className={styles.bar2}></div>
           <div className={styles.bar3}></div>
         </div>
      </div>
 </Nav>

我的 CSS - 它有变化的样式

div[class="menuIcon"] {
    background-color: #ffffff;
    padding: 13px;
    margin-right: 46px;
    float: right;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 32px;
    height: 3px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}
  
.change .bar2 {
    opacity: 0;
}
  
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

Answer 1

您正在尝试在 React 中使用 DOM 的 classList，但 React JSX 元素不是 DOM 元素，而是基于 XML 的标记，已被翻译为 JS。

在 React 中，您需要使用 state/props 来控制行为，并添加或删除类。

在示例中，我使用useState() 挂钩来切换布尔值，然后在模板字符串中添加或删除类名。

您可以使用诸如classnames 之类的库来防止自己编写大量带有类名的模板字符串。

const { useState } = React;

const styles = {
  menuIcon: 'menuIcon',
  change: 'change',
  bar1: 'bar1',
  bar2: 'bar2',
  bar3: 'bar3',
};

const Demo = () => {
  const [changed, setChange] = useState(false);
  
  const openMenu = (open) => {
    setChange(c => !c);
  };

  return (
    <nav className="ml-auto">
      <div className="allMenus">
        <div className={`${styles.menuIcon} ${changed ? styles.change : ''}`} onClick={openMenu}>
          <div className={styles.bar1}></div>
          <div className={styles.bar2}></div>
          <div className={styles.bar3}></div>
        </div>
      </div>
    </nav>
  );
}

ReactDOM.render(
  <Demo />,
  root
);

.menuIcon {
  padding: 13px;
  margin-right: 46px;
  float: right;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 32px;
  height: 3px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>