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

Question

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

下面的代码使用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 位于 rc-select 包之上，而不是浏览器自己的 select，因此仅传递 select 属性是行不通的。

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

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

• mode="multiple" 允许多选
• open={true} 使选项列表始终显示。请注意，这被视为叠加层，将覆盖其他内容，因此您需要修复一些样式。
• listHeight 最接近您的要求，但这需要多个像素而不是行数。每个选项在标准尺寸下都是 32 像素，因此您需要 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 做到这一点，但应该有更好的方法。