如何使反应选择选项可滚动 [英] How to make react-select options scrollable

问题描述

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

I have a list of options in being displayed in react-select. Since this component is at the lower edge of the screen the items tend to get cut off from the screen.

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

I noticed the selection lists provided in the official react-select provided has a scroll bar. I have tried looking at the docs and the GitHub page but i still couldn't figure out a solution.

下图显示了我的 react-select 选项列表是如何显示的.

The below image shows how my react-select options list is displayed.

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

My question is how do i make the list displayed to be scrollable.

以下是我用过的代码.

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，然后从父级传递到此组件中.

The option values are initially taken from an API and are passed into this component from the parent.

推荐答案

您可以使用 maxMenuHeight 道具:

<Select maxMenuHeight={250} />

这篇关于如何使反应选择选项可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！