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

Question

HTML select元素使用属性size来确定在滚动的 select 元素中一次应该可见多少行。

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

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

我试过设置属性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

The antd Select is built on top of the rc-select package instead of the browser's own select so just passing select attributes won't work.

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

我只是那里的一部分，但希望这会有所帮助。

• mode="multiple"允许多选
• 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>
);

我还没有弄清楚如何用当前选择隐藏顶部。 您可以使用 CSS 来做到这一点，但应该有更好的方法。