javascript - React-侧边栏 : Button is unclickable when moved outside props. child

Question

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

似乎侧边栏的 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 左右，它就会变得可点击并且可以工作。