設置 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 來做到這一點，但應該有更好的方法。