在React中切换侧边栏

Question

我创建了一个简单的应用程序来解决我在切换侧栏时遇到的问题。我正在尝试使用onClicks，以便可以打开和关闭侧边栏，但无法使其正常工作。我正在使用样式化组件，无论出于何种原因，我都无法切换边栏。我有一个简单的状态isOpen，它初始化为false，当我单击“导航栏”中的一个按钮时，我希望它通过onClick将状态切换为true，并出现侧边栏，并且但是，它不起作用。

这是密码框link

我尝试使用解构与不使用解构从头开始重新编写应用程序，并查找了代码中的任何错误，但没有。关于下一步可以尝试的任何想法？另外，我确保对onClicks使用箭头功能。

Answer 1

我看到的第一个问题是SidebarContainer正在创建一个覆盖层，该覆盖层阻止单击按钮将其打开。您需要更改从visibility导出的SidebarContainer的{​​{1}}属性：

SidebarElements

与将visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};设置为visibility或display相比，我更喜欢使用block属性，因为如果需要，您可以设置动画或过渡属性none或opacity。切换transform属性时，侧边栏将立即显示和消失。

还有其他事情，从display和toggle内部调用Sidebar时不需要使用匿名回调：

Navbar

<CloseIcon onClick={toggle}>X</CloseIcon>

我已经更新了您提供的sandbox link。

Answer 2

您的代码有两个问题

1. 您应该像onClick={() => toggle}或onClick={toggle}之类的方式调用onClick={() => toggle()}之类的拨动开关
2. 您的“侧边栏”与导航栏重叠（它是position:fixed与opacity:0并覆盖了整个屏幕）

因此，请修复1，然后将侧边栏移动到其他位置（以免重叠），或者将其display从none更改为block，而不是不透明。