ReactStrap.NET 在表格中显示的LONG下拉菜单的问题

Question

我有一个dropDown菜单，呈现在一个表格里面。

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

整个表格向下滚动，下拉列表也被拖动。所以当我试图到达最后一个项目时，我无法到达。而且整个表格的用户界面也变得一团糟。

这是下拉列表的代码。

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>

结果是这样的

虽然这样做可以解决这个问题（我可以访问最后一个项目），但由于某些原因，这对第一个元素造成了副作用。另外，我实际上想要的是使下拉列表的高度固定，并且使它可以滚动。比如说 显示两个项目，然后用户可以在下拉列表中向下滚动查看其余的项目，这可行吗？

Answer 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>