ReactStrap：显示在表格内的 LONG 下拉菜单存在问题答案

【问题标题】：ReactStrap: Problem with LONG dropdown menu that's displayed inside of a tableReactStrap：显示在表格内的 LONG 下拉菜单存在问题
【发布时间】：2020-08-22 16:44:09
【问题描述】：

我有这个在表格内呈现的下拉菜单：

这是一个包含 16 个项目的长下拉列表。因此，当我单击它并尝试向下滚动以到达最后一项时，会发生这种情况：

整个表格向下滚动，下拉列表被拖动。所以当我试图到达最后一个项目时，我做不到。整个表格的 UI 变得一团糟。

这是下拉列表代码：

const statusDropDown = (
      <Dropdown
        isOpen={this.state.statusUpdateDropDownOpen}
        toggle={this.toggleStatusUpdateDropDown}
        // scrollable={true}
      >
        <DropdownToggle className="my-dropdown" caret>
          {this.state.statusUpdateDropDownValue}
        </DropdownToggle>
        <DropdownMenu>
          {Object.entries(listeDesStatus).map(([key, value], i) => {
            console.log("INSIDE TABLE, value is");
            console.log(value);
            return (
              <DropdownItem
                key={i}>
                <div value={key} onClick={this.changeStatusUpdateDropDownValue}>
                  {value}
                </div>
              </DropdownItem>
            );
          })}
        </DropdownMenu>
      </Dropdown>
    );

这是渲染的地方：

 <tbody>
{Object.entries(this.state.operationSavInformation).map(
  ([key, value]) =>
    key !== "id" &&
    (key === "Status" ? (
      <tr key={key}>
        <td>{key}</td>
        <td>
          {statusDropDown}
        </td>
      </tr>
    ) : (
      <tr key={key}>
        <td>{key}</td>
        <td>
          <strong>{value}</strong>
        </td>
      </tr>
    ))
)}
</tbody>

我做了一些研究，发现固定高度可能会解决这个问题：

 const statusDropDown = (
  <Dropdown
    isOpen={this.state.statusUpdateDropDownOpen}
    toggle={this.toggleStatusUpdateDropDown}
    // scrollable={true}
  >
    <DropdownToggle className="my-dropdown" caret>
      {this.state.statusUpdateDropDownValue}
    </DropdownToggle>
    <DropdownMenu style={{ maxHeight: "28px" }}>
      {Object.entries(listeDesStatus).map(([key, value], i) => {
        console.log("INSIDE TABLE, value is");
        console.log(value);
        return (
          <DropdownItem
            key={i}>
            <div value={key} onClick={this.changeStatusUpdateDropDownValue}>
              {value}
            </div>
          </DropdownItem>
        );
      })}
    </DropdownMenu>
  </Dropdown>

结果如下：

虽然这种解决了问题（我可以访问最后的项目），但由于某种原因，这对第一个元素造成了副作用。
此外，我真正想要的是修复下拉列表的高度并使其可滚动。例如：显示两个项目并查看其余项目，用户可以在下拉列表中向下滚动。这可行吗？

【问题讨论】：

标签： javascript css reactjs bootstrap-4 reactstrap

【解决方案1】：

尝试为下拉列表提供max-height 和overflow: scroll。

.really-long-list {
  background: red;
  max-height: 150px;
  overflow: scroll;
  width: 70px;
}

<ul class="really-long-list">
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ul>

【讨论】：

【解决方案2】：

您需要在 DropdownMenu 中添加 style={{ maxHeight: "28px", overflow:"scroll"}}。

【讨论】：