javascript 没有页面刷新时jquery无法工作Reactjs

dnph8jn4  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(134)

我在Reactjs工作,并试图使用jquery(添加类onclick),它的工作,每当我们刷新页面,但每当我来到任何菜单点击后的页面(不刷新),然后jquery不工作(添加类onclick不工作),我怎么能做到这一点?这里是我目前的代码

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

cbeh67ev1#

同时使用Jquery和React并不是一个好主意。总的来说,你应该避免让两个东西修改DOM,因为这会增加代码维护的难度和不稳定性(很难说什么在修改什么!)。我认为你可以通过onClick事件和条件类来实现你想做的事情。类似于:

import React, { useState } from "react";
    
    const App = () => {
      const [active, setActive] = useState(false);
    
      return (
        <div className="box">
          <div className={`.MuiFormControlLabel-root ${active ? "active" : ""}`}>
            I am some div
          </div>
          <button onClick={() => setActive(!active)}>Click here!</button>
        </div>
      );
    };

如果你想看看它的实际应用,这里有一个代码:https://codepen.io/Chanodev/pen/gOjmgwa
但是,如果您想走jquery路线,最好的办法是获取不受React操作的DOM的某个部分,如www.example.com中所示https://reactjs.org/docs/integrating-with-other-libraries.html#how-to-approach-the-problem。

import React, {useEffect, useRef} from "react"

    const App = () => {
      const el = useRef(null)
      useEffect(() => {
        //Do stuff with 'el' HTMLElement here. You could also call the 
        //  proposed code here, but manipulating DOM with 
        //  both React and Jquery is a bad idea. 
        /*$(".PrivateSwitchBase-input-6").on('click', function(sss){
                $(".MuiFormControlLabel-root").removeClass("active"); 
            $(this).parents('.MuiFormControlLabel-root').addClass("active");
          }); */
        return () => {
        //Cleanup stuff with 'el'. Destroy jquery listeners. 
    }
      }, [])
      return(
         <div ref={el}>Hello</div>
      );
    }

一些好的链接:

相关问题