React Semantic UI下拉菜单在底部打开

Question

<Dropdown
text={employeeOptions.find((e) => e.key === selectedEmployee)?.text as string || t('roomDetails.selectEmployee')}
value={selectedEmployee}
selectOnBlur={false}
scrolling
fluid
options={employeeOptions}
onChange={onEmployeeChange}
disabled={disabled}
className={styles.employeeDropdown}
/>

我的任务是使这个下拉列表只从底部打开(即使没有空间(。

目前底部是这样打开的：

[Option1]
[Option2]
[Option3]
[Dropdown]

但我想在底部打开它，如下所示：

[Dropdown]
[Option1]
[Option2]
[Option3]

Answer 1

设置upward={false}以防止其向上打开。请参阅此处的官方文档

import React from 'react'
import { Dropdown } from 'semantic-ui-react'
const options = [
{ key: 1, text: 'One', value: 1 },
{ key: 2, text: 'Two', value: 2 },
{ key: 3, text: 'Three', value: 3 },
]
const DropdownExampleUpwardSelection = () => (
<Dropdown
upward={false}
search
selection
options={options}
placeholder='Choose an option'
/>
)
export default DropdownExampleUpwardSelection