使用React处理跨不同出口的事件

时间:2020-04-20 13:32:23

标签: reactjs react-hooks react-three-fiber

因此,我想创造一个弹出DIV当对象已经被选择,将从侧面滑动,然后当该对象是重新选择退出。我还想创建一个退出按钮,该按钮也将关闭div。除了可以重用此div组件(这就是为什么我将其作为导出保留在其他javascript文件中)之外,我几乎可以理解如何执行此操作。这是问题所在,因为我无法处理文件中的事件。

这是我的代码:

/*Popup div export*/

export default () => {

  const [toggle, set] = useState(true);

  const { xyz } = useSpring({
      from: { xyz: [-1000, 0, 0] },

    xyz: toggle ? [0, 0, 0] : [-1000, 0, 0]
  });

  return (
    <a.div
      style={{
        transform: xyz.interpolate(
          (x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`
        )
      }}
      className="expand"
    >
      <Link to={link}>
        <a.button>Next</a.button>
      </Link>
      <button onClick={() => set(!toggle)}>Exit</button>
    </a.div>
  );
};


/*This is where I am implementing the export*/

      <Canvas>

        <Suspense fallback={<Fallback />}>

          <Cube position={[-1.2, 0, 0]} onClick={e => <Toggle />} /> <---/*Here is the click event where I call the div*/-->

          <Cube position={[1.2, 0, 0]} />
        </Suspense>
      </Canvas>

  );
}

我尝试过更改样式,以使显示“隐藏”和“阻止”,但是这不起作用,因为它没有显示动画,而只是弹出幻灯片。此外,例如,如果我尝试单独操作此操作,例如,在画布内创建一个click事件,以使div带有react-spring;如果我尝试使用退出按钮,则click事件不再起作用。

这是我的沙箱,用于显示正在发生的事情。 :(对不起,如果这一切看起来令人困惑) 代码位于Page1.js和toggle.js

https://codesandbox.io/s/sad-goldberg-pmb2y?file=/src/toggle.js:250-326

编辑: 更简单的沙盒视觉效果: https://codesandbox.io/s/happy-chatelet-vkzjq?file=/src/page2.js

1 个答案:

答案 0 :(得分:1)

您的示例有点令人困惑,可以简化复制。就是说,如果我了解总体目标,我想您想存储一些全局状态(也许在App.js组件中),该状态具有关于边栏可见的某种状态。

例如:

function App() {
  const [sidebarVisible, setSidebarVisible] = React.useState(false)

  const toggleSidebar = () => setSidebarVisible(!sidebarVisible)

  return (
    <Router>
      <Switch>
        <Route path="/page1">
          <Page1 toggleSidebar={toggleSidebar} />
        </Route>
        <Route path="/page2">
          <Page2 toggleSidebar={toggleSidebar} />
        </Route>
        <Route path="/">
          <Start toggleSidebar={toggleSidebar} />
        </Route>
      </Switch>
    </Router>
  )
}

function Page1({ toggleSidebar }) {
  return <Toggle toggleSidebar={toggleSidebar} />
}

function Toggle({ toggleSidebar }) {
  return <button onClick={toggleSidebar}>Toggle</button>
}

这只是为了给您提供想法,您当然可以传递setSidebarVisible函数或使另一个函数存储有关应在边栏上显示的内容的状态。

您还可以使用Redux或React Context之类的东西将状态/动作传递到组件中。

希望这会有所帮助??