限制下拉列表中可见项目的数量 [英] Limit number of visible items in dropdown

问题描述

我需要限制在 react-select 下拉面板中显示的可见选项的数量.

I need to limit the number of visible options displayed in the react-select dropdown panel.

目前它显示大约 9 个项目，但我需要将其限制为 5 个.我不知道如何更改下拉列表.

At the moment it shows around 9 items but I need that limited to 5. I'm not sure how to go about making changes to the dropdown.

推荐答案

我通过覆盖核心组件样式来解决这个问题.这只是查找哪个组件呈现了我感兴趣的样式的一个案例.

I figured this out by overriding core component styles. It was just a case of finding which component rendered the styles I was interested in.

在本例中，控制下拉列表中可见项目的是 menuList 组件.要覆盖组件样式，这是我使用的:

In this case it was the menuList component that controlled the visible items in the dropdown. To override the component styles this is what I used:

const selectStyles = {
  menuList: styles => {
    console.log('menuList:', styles);
    return {
      ...styles,
      maxHeight: 136
    };
  }
};

return (
  <Select
    value={selectVal}
    onChange={updateVal}
    options={options}
    styles={selectStyles}
  />
);

我发现 console.log 输出组件样式以查看特定组件可用的样式以及使用的默认值非常有用.

I found it very useful to console.log out the component styles to see what styles are available for a particular component as well as the default values used.

这篇关于限制下拉列表中可见项目的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！