防止 onClick 在负载时被触发。 我在 React 项目中使用功能组件

Question

This is the Parent Component which passes a reference to the cart component

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

The Child Component assigns the reference to the div shown below

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

export default  Cart;

Does passing references like this cause such issues?

Answer 1

Try it like this: <Cart cRef={cartRef} onClick={handleClick}/>

I think the handleClick fires because it's passed in a wrong way.

Answer 2

The handleClick() isn't actually getting fired. Whats happening is that the Cart component that has been imported to the Header component will be visible like any component does when placed in the return statement.

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;

We can set the Cart component's Visibility to 'hidden' and then on the handleClick() event handler, we set it back to 'visible' again.