如何将 useState 函数用作切换方法？

Question

import React, { useEffect, useState } from "react";
import './Menu.css'


export default function Menu() {

const [classes, setClasses] = useState('container')
    return (
        <div>
            <p>Click on the Menu Icon to transform it to "X":</p>
            <div className={classes} onClick={() => setClasses("container change")}>
            <div className="bar1"></div>
            <div className="bar2"></div>
            <div className="bar3"></div>
            </div>
        </div>
    )
}

由于给定的解决方案之一，它现在可以工作，但是当我再次单击该图标时，它不会返回到原始状态。我该如何解决？

我从这里得到了这个菜单示例：https://www.w3schools.com/howto/howto_css_menu_icon.asp

Answer 1

您可以使用 state 检查当前状态（用户是否点击），然后可以相应地规划行为：

export default function Menu() {
  const [toggle, setToggle] = useState(false);
  return (
    <div>
      <p>Click on the Menu Icon to transform it to "X":</p>
      <div
        // If toggle is true, set className to 'change' else 'contianer'
        className={toggle ? 'change' : 'container'}
        // toggle state (toggle) on click
        onClick={() => setToggle(prevToggle => !prevToggle)}
      >
        <div className='bar1'></div>
        <div className='bar2'></div>
        <div className='bar3'></div>
      </div>
    </div>
  );
}

Answer 2

您可能想使用 useState 挂钩动态更改元素的 class 名称。




import React from 'react'
import './Menu.css'


export default function Menu() {

const [classes, setClasses] = useState('container')
    return (
        <div>
            <p>Click on the Menu Icon to transform it to "X":</p>
            <div className={classes} onClick={() => setClasses("container change")}>
            <div className="bar1"></div>
            <div className="bar2"></div>
            <div className="bar3"></div>
            </div>
        </div>
    )
}

也许是这样的。但我相信还有其他方法。

如果你想来回切换；

setClasses(prevClasses => {
if (prevClasses = "container") return "container change" 
else { return "container" }
})

如何将 useState 函数用作切换方法？

How can I use the useState function as a toggle method?

html

onclick

reactjs