React中JQuery点击添加类功能仅页面刷新后生效问题求助

原因分析 #

React是单页应用，路由跳转时不会刷新页面，只会动态挂载/卸载组件。你的代码写在$(document).ready()里，这个函数只在页面首次加载时执行一次。当通过菜单跳转进入页面时，目标元素是之后才渲染到DOM中的，此时JQuery已经完成了事件绑定，自然不会给新元素绑定点击事件。

解决方案1：使用JQuery事件委托 #

利用事件冒泡机制，把点击事件绑定到一个始终存在于DOM中的父元素（比如document或者页面根容器），而非直接绑定到动态生成的元素上。修改后的代码如下：

$(document).on('click', ".PrivateSwitchBase-input-6", function(sss){
    $(".MuiFormControlLabel-root").removeClass("active"); 
    $(this).parents('.MuiFormControlLabel-root').addClass("active");
});

这样不管元素是首次加载还是后续动态渲染的，只要匹配选择器，点击事件都会触发。

解决方案2：放弃JQuery，用React原生方式实现（推荐） #

React是数据驱动视图的框架，直接用JQuery操作DOM会和React的虚拟DOM更新机制冲突，长期来看容易引发难以排查的问题。更合理的方式是用React的状态来控制类名：

假设你的组件结构类似这样：

import { useState } from 'react';

const YourComponent = () => {
    // 保存当前激活项的标识（比如id或者索引）
    const [activeItemId, setActiveItemId] = useState(null);

    const handleSwitchClick = (itemId) => {
        setActiveItemId(itemId);
    };

    return (
        <div>
            {/* 假设这是你的开关列表，每个项有唯一id */}
            {yourSwitchList.map(item => (
                <div 
                    key={item.id}
                    className={`MuiFormControlLabel-root ${activeItemId === item.id ? 'active' : ''}`}
                >
                    <input
                        type="checkbox"
                        className="PrivateSwitchBase-input-6"
                        onClick={() => handleSwitchClick(item.id)}
                    />
                    {/* 其他内容 */}
                </div>
            ))}
        </div>
    );
};

export default YourComponent;

通过useState维护激活状态，点击时更新状态，React会自动根据状态重新渲染并添加/移除active类，完全不需要依赖JQuery，也能完美适配路由跳转的场景。

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