Javascript 防止onClick在加载时被触发。I'；m在React项目中使用功能组件

这是将引用传递给购物车组件的父组件

函数头（）{
const cartRef=useRef（）；
常量handleClick=（）=>{
cartRef.current.style.boxShadow=“0 0 100vw rgb（0,0,0,0.9）”
}
返回(
{handleClick（）}}/>
);
}
导出默认标题；

子组件将引用分配给如下所示的div

    function Cart(props) {
    
        return (<>
                  <div ref={props.cRef}>
                     ...
                  </div>
            </>
        );
    }

export default  Cart;

功能车（道具）{
返回(
...
);
}
导出默认购物车；

像这样传递引用会导致这样的问题吗？

像这样尝试：

我认为，

handleClick

启动是因为它以错误的方式传递。

handleClick（）实际上没有被启动。所发生的是，导入到Header组件的Cart组件将与任何组件放置在return语句中时一样可见

function Header() {
    
      const cartRef = useRef();
    
      const handleClick = () =>{
        cartRef.current.style.visibility = "visible";
        cartRef.current.style.boxShadow = "0 0 0 100vw rgb(0, 0, 0, 0.9)"
      }
    
        return (
                  <>
                    <Cart cRef={cartRef} onClick={()=>{handleClick()}}/>
                  </>
                );
      }
      
      export default Header;

函数头（）{
const cartRef=useRef（）；
常量handleClick=（）=>{
cartRef.current.style.visibility=“可见”；
cartRef.current.style.boxShadow=“0 0 100vw rgb（0,0,0,0.9）”
}
返回(
{handleClick（）}}/>
);
}
导出默认标题；

---

我们可以将购物车组件的可见性设置为“隐藏”，然后在handleClick（）事件处理程序上，再次将其设置为“可见”。

是的，它应该可以工作。我们需要更多的代码来查看发生了什么。请您现在检查一下。我在

Cart

中添加了更多的code context.Console.log

props.cRef

。

current

有哪些值？它有购物车组件。问题不在于它不起作用。一切正常，只是第一次被解雇，我不知道为什么。我才意识到发生了什么。我发现事件处理程序是完全忘记渲染过程的罪魁祸首。请核对我的答案。

function Header() {
    
      const cartRef = useRef();
    
      const handleClick = () =>{
        cartRef.current.style.visibility = "visible";
        cartRef.current.style.boxShadow = "0 0 0 100vw rgb(0, 0, 0, 0.9)"
      }
    
        return (
                  <>
                    <Cart cRef={cartRef} onClick={()=>{handleClick()}}/>
                  </>
                );
      }
      
      export default Header;