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

【问题标题】：How to toggle menu icon to cross icon while click the menu icon in Reactjs单击Reactjs中的菜单图标时如何将菜单图标切换为十字图标
【发布时间】：2021-08-01 22:53:21
【问题描述】：

我尝试使用 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

【问题讨论】：

这能回答你的问题吗？ Close react button dropdown menu on clicking or hovering outside of menu area
您需要查看 react 中一个非常重要的部分，称为 state。您需要一个充当布尔值的状态变量（或挂钩）。如果按钮已被单击，则更新状态。我强烈建议您查看 React 教程（即使它只是在 Youtube 上），因为这是 React 最核心的方面之一，也是您应该首先学习的内容之一。如果您在发布问题之前进行了任何（我的意思是任何）研究，那么您自己也会意识到这一点。在开始之前，请花点时间了解您想要学习的任何基础知识。

标签： javascript html css reactjs

【解决方案1】：

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

【讨论】：