Javascript 按钮下拉菜单在Reactstrap | React JS中工作不正常

我正在使用的组件进行react项目

下拉菜单工作正常，但当它打开时，它与网站中的内容重叠（在我的例子中，它只是一个我正在显示一些数据的窗口）

我的问题是，当重叠内容时，它部分地允许我们与它下面的表进行交互（如图所示，它允许调整列的大小，而不是选择该项）。它可以防止在下拉图标上的单击行为

请帮帮我

这是我的密码

render() {

  return (
    <ContentWrapper>
      <div className="content-heading">
        Users
        <div className="header-actions">
          <i className="fas fa-search fa-xs header-action mt-2 neutral5-color" />
          <Input
            id="serach"
            name="name"
            type="search"
            placeholder="Search"
            value={this.state.search}
            onChange={event => this.setState({ search: event.target.value })}
            className="header-action"
          />
          <Button
            color="primary"
            onClick={this.toggleModal}
            className="header-action">
            Add User
          </Button>

          <ButtonDropdown color="primary" isOpen={this.state.dropdownOpen} toggle={() => {this.setState({dropdownOpen: !this.state.dropdownOpen})}}>
            <DropdownToggle caret>
              Filter (All)
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem onClick={() => console.log('all')}>All</DropdownItem>
              <DropdownItem onClick={() => console.log('user')}>User</DropdownItem>
              <DropdownItem onClick={() => console.log('super user')}>Super user</DropdownItem>
              <DropdownItem onClick={() => console.log('super admin')}>Super Admin</DropdownItem>
            </DropdownMenu>
          </ButtonDropdown>

          <AddUser
             toggleModal={this.toggleModal}
             fields={this.state}
          />
        </div>
      </div>
      <div className="section-content-wrapper flex-column">
        <Card className="card-default user-card-height">
          <CardBody>
            <ReactTable
              data={users}
              columns={this.columns}
              noDataText={"Didn't find any user."}
              defaultPageSize={DEFAULT_PAGE_SIZE_IN_TABLE}
              showPageSizeOptions={false}
              PaginationComponent={CustomPagination}
              minRows={0}
              sortable={false}
              loading={is_loading}
              onPageChange={page =>
                document.getElementsByClassName('rt-tbody')[0].scrollTop = 0
              }
            />
          </CardBody>
        </Card>
      </div>
    </ContentWrapper>
  );
}

render（）{
返回(
使用者
this.setState（{search:event.target.value}）
className=“标题操作”
/>
添加用户
{this.setState（{dropdownOpen:！this.state.dropdownOpen}}}>
过滤器（全部）
console.log（'all'）}>all
console.log（'user'）}>user
console.log（'super user'）}>super user
console.log（'super admin'）}>super admin
document.getElementsByClassName（'rt-tbody'）[0]。scrollTop=0
}
/>
);
}

---

提前谢谢。

我不知道Reactstap本身，但解决方案是，您需要确保下拉z索引高于表格以及您希望位于此下拉菜单后面的背景中的任何内容。

如何将

z索引设置为最大值？另外，我不熟悉前端开发。@JayPatel您不必将z-index设置为最大值，它只需高于背景中的值，您可以使用值本身。我建议首先使用chrome开发工具来定位元素，然后在元素上尝试更高的z索引，然后从react中将该值设置为该元素。我将表的
z索引设置为0，它就工作了。谢谢