限制下拉列表中可见项目的数量

Question

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

目前它显示大约 9 个项目，但我需要限制在 5 个以内。我不确定如何更改下拉列表。

Answer 1

你用这个react-dropdown library https://www.npmjs.com/package/react-dropdown-select吗？

这个库有选项属性。用户可以选择哪些选项 select。对于这个答案。您可以在选项中添加 5 个项目，如下所示。

const options = [
  {key: '1', value: 'first'},
  {key: '2', value: 'two'},
  {key: '3', value: 'three'},
  {key: '4', value: 'four'},
  {key: '5', value: 'five'}
];

<react-dropdown-selecte options={options} />

Answer 2

我通过重写核心组件样式解决了这个问题。这只是查找哪个组件呈现了我感兴趣的样式的情况。

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

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

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

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

限制下拉列表中可见项目的数量

Limit number of visible items in dropdown

react-select