如何使 react-select 选项可滚动

Question

我有一个选项列表正在显示在 react-select 中。由于此组件位于屏幕的下边缘，因此项目往往会从屏幕上被切断。

我注意到官方react中提供的select离子列表-select提供了一个滚动条。我已经尝试查看文档和 GitHub 页面，但我仍然无法找到解决方案。

下图显示了我的 react-select 选项列表的显示方式。

我的问题是如何使显示的列表可滚动。

以下是我用过的代码

import Select from 'react-select';

const SearchSelect = (props) => {
  const { options, defaultValue, onChange, name, label } = props;
  return (
    <>
      {label && <label htmlFor="search-select">{label}</label>}
      <Select
        options={options}
        defaultValue={defaultValue}
        onChange={onChange}
        name={name}
        id="search-select"
      />
    </>
  );
};

选项值最初取自 API 并从父级传递到此组件。

Answer 1

您可以玩 maxMenuHeight 道具：

<Select maxMenuHeight={250} />

Answer 2

const menuPortalTarget = document.getElementById('root');
<Select
    maxMenuHeight={220}
    menuPlacement="auto"
    menuPortalTarget={menuPortalTarget}
/>

maxMenuHeight - 将您的菜单高度限制为给定的输入，在我的例子中它限制在 220 像素，然后您可以在图像中看到添加了滚动条。

menuPlacement - 它可以根据 auto

中可用的 space 在 select 输入的上方或下方显示您的菜单

如何使 react-select 选项可滚动

How to make react-select options scrollable

reactjs

react-select