ReactJS中点击菜单图标时如何将其切换为叉号图标

存在的核心问题 #

• 未通过组件状态管理图标切换状态，toggleicon 方法返回的JSX未关联渲染逻辑，不会触发视图更新
• 类方法未绑定this指向，执行时无法访问组件实例
• 导入Component时首字母小写（React要求组件类首字母大写），HTML的class属性在React中需写为className
• 未阻止a标签默认跳转行为，会导致页面刷新重置状态

修正后完整代码 #

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

class Sidebar1 extends Component {
    // 初始化状态，记录菜单是否打开
    state = {
        isMenuOpen: false
    }

    // 用箭头函数自动绑定this，避免指向问题
    toggleicon = (e) => {
        // 阻止a标签默认跳转行为
        e.preventDefault();
        // 更新状态，触发组件重新渲染
        this.setState({
            isMenuOpen: !this.state.isMenuOpen
        })
    }

    render() {
        return (
            <div className="sidebar1">
                <div className="menueiconstyle">
                    <a href="#" onClick={this.toggleicon}>
                        {/* 根据状态动态切换图标类名 */}
                        <i className={this.state.isMenuOpen ? "fas fa-times" : "fas fa-bars"}></i>
                    </a>
                </div>
            </div>
        );
    }
}
export default Sidebar1

关键修改说明 #

• 新增isMenuOpen状态变量作为图标切换的判断依据，调用setState更新状态会自动触发组件重新渲染
• 使用箭头函数定义toggleicon，自动绑定组件实例的this指向，不需要额外手动bind
• 点击事件触发时先阻止a标签的默认跳转行为，避免页面刷新
• 动态绑定图标className，根据isMenuOpen的值切换对应的图标类

内容的提问来源于stack exchange，提问作者Mohamed Zihan