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

Question

我正在做一个 React 项目，使用 Button Dropdown component of Reactstap。

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

我的问题是在重叠内容时，它部分允许我们与其下方的 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>
  );
}

提前致谢。

Answer 1

我不知道 Reactstap 本身，但解决方案是您需要确保下拉 z-index 高于 table 以及您希望在此下拉菜单后面的任何背景.

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

Button dropdown not working properly in Reactstrap | React JS

javascript

drop-down-menu

reactjs

reactstrap