onmousemouve工作，但悬停效果和点击在reatcjs应用程序中不起作用

Question

我正在做我的项目，我想在这个wordpress模板上做鼠标效果，http://preview.themeforest.net/item/consultio-consulting-business-wordpress/full_screen_preview/25376496？_ga=2.61545708.1311804999.1617452015-579954703.1617357573

但在我的项目中我有：

null

let circle = document.getElementById("ct-mouse-move"); 

const onMouseMove = (e) =>{
    circle.style.left = e.pageX + "px";
    circle.style.top = e.pageY + "px";
};
document.addEventListener("mousemove", onMouseMove)

#ct-mouse-move {
    position: fixed;
    z-index: 9999;
}



#ct-mouse-move .circle-cursor--outer {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(14, 128, 246, 0.5);
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    margin-top: -17px;
    margin-left: -16px;
    -webkit-transition: all 50ms linear 0ms;
    -khtml-transition: all 50ms linear 0ms;
    -moz-transition: all 50ms linear 0ms;
    -ms-transition: all 50ms linear 0ms;
    -o-transition: all 50ms linear 0ms;
    transition: all 50ms linear 0ms;
}

#ct-mouse-move .circle-cursor--inner {
    width: 6px;
    height: 6px;
    background-color: #0e80f6;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    margin-top: -18px;
    margin-left: -4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ct-mouse-move" style="top: 0px; left: 0px;">
    <div class="circle-cursor circle-cursor--outer"></div>
    <div class="circle-cursor circle-cursor--inner"></div>
</div>

null

Answer 1

好的，你能再给我解释一下吗，因为我在这里没有看到react，如果你在react中这样做，那就太不对了，你应该考虑阅读文档。