设置 antd select 组件选项列表的大小

Question

HTML select 元素使用 attribute size 来确定在滚动的 select 元素中一次应显示多少行。

下面的代码使用 size="4" 一次显示 4 个选项。

我想知道如何在 React 应用程序中使用 Ant Design Select component 获得相同的功能。

我试过设置属性 size 和 multiple 但都不起作用。我对 JavaScript 解决方案持开放态度。有什么想法吗？

工作代码：

<select size="4">
  <option id="apple" selected>Apple</option>
  <option id="orange">Orange</option>
  <option id="pineapple">Pineapple</option>
  <option id="banana">Banana</option>
</select>

antd示例代码:

const {  Select  } = antd;

const { Option } = Select;

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Search to Select"
    optionFilterProp="children"
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
    filterSort={(optionA, optionB) =>
      optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
    }
  >
    <Option value="1">Not Identified</Option>
    <Option value="2">Closed</Option>
    <Option value="3">Communicated</Option>
    <Option value="4">Identified</Option>
    <Option value="5">Resolved</Option>
    <Option value="6">Cancelled</Option>
  </Select>,
  mountNode,
);

Answer 1

antd Select 是 built on top of the rc-select 包而不是浏览器自带的 select 所以只传递 select 属性是行不通的。

该组件设计为一个部分显示当前 selected 项目并允许用户键入，另一个部分显示选项列表。听起来您希望选项列表成为唯一的部分？用户只需滚动列表 select 或删除 select。

我只完成了一部分，但希望这会有所帮助。

mode="multiple" 允许多个 select 离子
open={true} 使选项列表始终显示。请注意，这被视为叠加层，将覆盖其他内容，因此您需要修复一些样式。
listHeight 最接近您的要求，但这需要一些像素而不是一些行。每个选项在标准尺寸下都是 32px，因此您需要 4 * 32 或 128.

import "antd/dist/antd.css";
import { Select } from "antd";
const { Option } = Select;

export default () => (
  <Select
    style={{ width: 200 }}
    placeholder="Hide Me"
    mode="multiple"
    open={true}
    listHeight={128}
  >
    <Option value="1">Not Identified</Option>
    <Option value="2">Closed</Option>
    <Option value="3">Communicated</Option>
    <Option value="4">Identified</Option>
    <Option value="5">Resolved</Option>
    <Option value="6">Cancelled</Option>
  </Select>
);

我还没有想出如何用当前 selection 隐藏顶部部分。你可以用 CSS 来做，但应该有更好的方法。

设置 antd select 组件选项列表的大小

Setting the size for an antd select component options list

html

javascript

drop-down-menu

reactjs

antd