Question

我正在尝试通过将按钮的位置移到props.children之外来修改react-sidebar文档中给出的第一个示例。当我这样做时，该按钮将变为不可单击。该按钮不仅执行任何操作，而且实际上无法单击它。

即使折叠它，侧边栏的z-index似乎也占据了整个屏幕，但是当我将按钮的z-index设置为3时，它仍然不可点击。

  render() {
    return (
      <Sidebar
        sidebar={<b>Sidebar content</b>}
        open={this.state.sidebarOpen}
        onSetOpen={this.onSetSidebarOpen}
        styles={{ sidebar: { background: "white" } }}
      >
        <button onClick={() => this.onSetSidebarOpen(true)}>
          Open sidebar
        </button>
      </Sidebar>
    );
  }

我的无效修改

  render() {
    return (
     <div>
       <Sidebar
        sidebar={<b>Sidebar content</b>}
        open={this.state.sidebarOpen}
        onSetOpen={this.onSetSidebarOpen}
        styles={{ sidebar: { background: "white" } }}
      />
        // Moved button out of here
       </Sidebar>

      <button onClick={() => this.onSetSidebarOpen(true)}>
        Open sidebar
      </button>

     </div> 
    );
  }

Answer 1

这是因为react-sidebar的覆盖层覆盖了整个屏幕，并且按钮位于其下方，因此无法单击按钮。只需提供按钮position: absolute和z-index: 4左右，它就会变为可点击并可以使用。

Answer 2

给出的答案无效。对我有用的是将叠加层的高度和宽度设置为零。使用开发者控制台，您可以找到叠加层的CSS选择器，对我来说，它是#gatsby-focus-wrapper > div:nth-child(1)。因此，解决此问题的代码是-

#gatsby-focus-wrapper > div:nth-child(1){
  height: 0;
  width: 0;
}

React-Sidebar：当移到props.children之外时，按钮不可单击

2 个答案: