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

Question

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

我注意到官方提供的 react-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，并从父组件传递到此组件。

标签： reactjsreact-select

Answer 1

你可以玩maxMenuHeight道具：

<Select maxMenuHeight={250} />