antd 自动完成下拉高度

Question

我是antd的新手，英语不是我的母语，所以可能有错误，我有两个问题，1：目前如果下拉菜单中有很多信息，用户不知道是否有更多信息，需要向下滚动（在手机上）滚动条出现，我的问题是如何让滚动条一直可见？ 2：如果我不想要第一个，如何在用户不必向下滚动的情况下显示 100% 的下拉菜单，例如“listHeight”为 100%（尝试在那里写，不接受 %）

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { CloseOutlined } from "@ant-design/icons";

export default function EventsSection() {
  const autoControl = React.createRef();
  const defaultOptions = [
    { value: "1", text: "Not Identified" },
    { value: "2", text: "Closed" },
    { value: "3", text: "Communicated" },
    { value: "4", text: "Identified" },
    { value: "5", text: "Resolved" },
    { value: "6", text: "Cancelled" }
  ];


  const { Option } = AutoComplete;



  return (
    <div>

      <AutoComplete
        open={dropdownOpen}
        style={{ width: 200 }}
        placeholder="Search..."
        listHeight={128}
        onChange={changeHandler}
        value={selectedOption}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.text}>
            {option.text}
          </Option>
        ))}
      </AutoComplete>
      <Button
        disabled={!selectedValue}
        onClick={onClear}
        type="primary"
        icon={<CloseOutlined />}
      />
    </div>
  );
}

ReactDOM.render(<EventsSection />, document.getElementById("container"));

Answer 1

你可以试试这个codesandbox我从官方例子中修改的，有你的问题的解决方案。

1. 如何始终显示滚动条

您可以使用 css-in-js 例如 styled-components 或通用 css|scss 方法来覆盖下拉样式。

.rc-virtual-list-scrollbar {
  display: block !important;
}

1. 如何在下拉菜单中显示完整的项目列表

你用的是什么版本的antd？ listHeight="100%" 适用于 v4.15.3

<AutoComplete
  style={{
    width: 200
  }}
  onSearch={handleSearch}
  placeholder="input here"
  listHeight="100%"
>
  {result.map((email) => (
    <Option key={email} value={email}>
      {email}
    </Option>
  ))}
</AutoComplete>