React useState将图标从汉堡包更改为关闭图标fas fa次

Question

这是我的代码：https://github.com/reouen/bikes/tree/main/src/components

<i className={click ? 'fas fa-times' : 'fas fa-bars'}/>

^点击上面的图标后，应该将其与下面的useState一起更改为fas fa times。为什么它不起作用？

import React, { useState } from 'react'
import Button from './Button'
import './Navbar.css'
import Dropdown from './Dropdown'
import { Link } from 'react-router-dom'
function Navbar() {
const {click, setClick} = useState(false)
const handleClick = () => setClick(!click)

return (
<nav className="Navbar">
<Link to="/" className="Navbar-logo">
EPIC
</Link>
<div className="menu-icon">
<i className={click ? 'fas fa-times' : 'fas fa-bars'}/>
</div>
</nav>   

)
}
export default Navbar

Answer 1

这是因为您没有在菜单图标div 中添加onClick事件侦听器

<div className="menu-icon" onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'}/>
</div> 

Answer 2

const [click, setClick] = useState(false)
const handleClick = () => {
setClick((curr) => !curr)
}
return (
<nav className="Navbar">
<Link to="/" className="Navbar-logo">
EPIC
</Link>
<div className="menu-icon" onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
</nav>
)
}

Answer 3

const [click, setClick] = useState(false)
const handleClick = () => setClick(!click)
return (

<nav className="navbar">
<div className="navbar-cantainer">
<Link to="/" className="navbar-logo">
EPIC 
</Link>
<div className="menu-icon" onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
</div>
</nav>


)