如何使反应选择选项可滚动

Question

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

我注意到官方提供的react-select中提供的选择列表具有滚动条。我曾尝试查看文档和GitHub页面，但仍然找不到解决方案。

下图显示了我的反应选择选项列表的显示方式。

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

以下是我使用的代码。

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道具，但是我认为您做错了什么。 如果您共享代码，那就太好了

Answer 2

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

maxMenuHeight-在我的情况下，将菜单高度限制为给定的输入，限制为220px，然后您可以在图像滚动条中看到它。

menuPlacement-它可以根据auto中的可用空间在您选择的输入上方或下方显示菜单。