如何在 ReactJS 中的重叠组件之间传递鼠标事件答案

【问题标题】：How to pass mouse events between overlapping components in ReactJS如何在 ReactJS 中的重叠组件之间传递鼠标事件
【发布时间】：2023-03-21 00:30:01
【问题描述】：

我正在构建一个包含两个重叠组件的页面，我想将鼠标事件从顶部组件传递到底部组件。

我正在使用 ReactJs，代码如下所示：

export default function App() {
  return (
    <>
    
    <SkyBox className='Streetview' onClick={()=>console.log("you clicked STREETVIEW!")}/>
    
    <Canvas className='Canvas' onClick={()=> console.log("you clicked THREEJS")}>
       <Camera position={[0, 0, -20]} />
     <ambientLight intensity={0.7} />
     
      <spotLight position={[10, 10, 10]} angle={0.90} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      
      <Suspense fallback={null}>
        <Scene />
      </Suspense>
    
      </Canvas>

    </>
  );
}

所以我想从 Canvas 组件中获取鼠标事件并将它们传递给街景 SkyBox 之一，以便用户可以浏览街景全景图，因此我感兴趣的事件是 mouseClick 、 mouseMove 和 mouseOut。

【问题讨论】：

是否需要在覆盖组件中捕获事件？如果没有...stackoverflow.com/questions/3680429/…

标签： javascript reactjs react-hooks

【解决方案1】：

您可以像这样将事件作为道具传递：

import { useState } from 'react'

const Wrapper = () => {
  const [event, setEvent] = useState(null)

  return (
    <div onClick={(e) => setEvent(e)}>
      Lorem Ipsum
      <Component event={event} />
    </div>
  )
}

const Component = (event) => {
  console.log(event) // → event: SyntheticBaseEvent
  return null
}

export default Wrapper

【讨论】：

【解决方案2】：

我不确定您是否需要鼠标事件的当前状态，但状态或设置器是否可以为此使用上下文并不重要。

export const CanvasContext = createContext();

export default function App() {
 const [mouseClicked, setMouseClicked] = useState(...);
 const [mouseMoveState, setMouseMoveState] = useState(...);
 const [mouseOut, setMouseOut] = useState(...);

  return (
    <CanvasContext.Provider value={{
       mouseClicked,
       setMouseClicked,
       mouseMoveState,
       setMouseMoveState,
       mouseOut,
       setMouseOut
    }}>
      <SkyBox
        className="Streetview"
        onClick={() => console.log("you clicked STREETVIEW!")}
      />

      <Canvas
        className="Canvas"
        onClick={() => console.log("you clicked THREEJS")}
      >
        <Camera position={[0, 0, -20]} />
        <ambientLight intensity={0.7} />

        <spotLight position={[10, 10, 10]} angle={0.9} penumbra={1} />
        <pointLight position={[-10, -10, -10]} />

        <Suspense fallback={null}>
          <Scene />
        </Suspense>
      </Canvas>
    </CanvasContext.Provider>
  );
}

然后在 Canvas/SkyBox/... 中使用您需要的状态/设置器，就像这样。

export default function Canvas() {
 const {setMouseClicked, setMouseMoveState} = useContext(CanvasContext);

  return (
    <div>
      .....
    </div>
  );
}

【讨论】：