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

Question

我正在使用Button Dropdown的Reactstap组件进行React项目。

Dropdown正常工作，但是当它打开时，它与网站上的内容重叠（在我的情况下，它只是我正在显示一些数据的react-table。]

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

请帮助我。

这是我的代码

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>
  );
}
提前感谢。

我正在使用Reactstap的Button Dropdown组件进行React项目。下拉菜单可以正常工作，但是当打开时，它会覆盖网站中的内容（在我的情况下，这只是一个反应-...

Answer 1