如何在 Reactjs 中单击菜单图标时将菜单图标切换为十字图标

Question

我尝试使用 ReactJS 创建网站，并尝试使用 ReactJs 使用 onClick 事件在单击菜单图标时切换菜单图标。但它不起作用。没有错误。但图标不是切换。有什么更正？

import React, { component } from 'react';
import './Sidebar1.css'

class Sidebar1 extends React.Component {
        toggleicon() { <
            i class = "fas fa-times" > < /i >
        }

        render() {

            return ( < div className = "sidebar1" > < div className = "menueiconstyle" > < a href = "#"
                onClick = { this.toggleicon } > <
                i class = "fas fa-bars" > < /i > < /a > < /div >  < /div > );
            }
        }
        export default Sidebar1   

Answer 1

1. 为相应的切换状态创建一个变量（布尔值） 例如：[isClicked, setIsClicked] = React.useState(false)
2. 当按钮被点击时替换类 例如：<i class=`fas ${isClicked ? "fa-times" : "fa-bars"}
3. setIsClicked() 应该用于按钮 onClick 事件