BlueprintJS : SUGGEST => 如何限制弹出框上的行数？答案

【问题标题】：BlueprintJS : SUGGEST => How to limit the row number on the popover?BlueprintJS : SUGGEST => 如何限制弹出框上的行数？
【发布时间】：2018-09-26 15:07:53
【问题描述】：

如何使用BluePrintJS的“Suggest”组件限制popOver中显示的行数（添加scollbar）？

<Suggest
    items={this.state.Plats}
    activeItem={this.state.activePlat}
    onActiveItemChange={this.handleActiveItemChange}
    itemRenderer={renderPlat}
    itemPredicate={filterFilm}
    onItemSelect={this.handleClick}
    noResults={<MenuItem disabled={true} text="Pas de résultat." />}
    inputValueRenderer={this.renderValue}
    popoverProps={{minimal: true, usePortal: true}}
/>

const filterFilm: ItemPredicate<IPlat> = (query, plat) => {
    const text = `${plat.Nom}`;
     return text.toLocaleLowerCase().indexOf(query.toLowerCase()) >= 0;
};

const renderPlat: ItemRenderer<IPlat> = (Plat, { handleClick, modifiers}) => 
{
  if (!modifiers.matchesPredicate){
    return null;
  }
  const text = `${Plat.Key}. ${Plat.Nom}`;
  return <MenuItem 
    key={Plat.Key} 
    active={modifiers.active}
    disabled={modifiers.disabled}
    label={Plat.Categorie}
    onClick={handleClick} 
    text={text} />;
};

Here is my result

我想将列表限制为 10 项，如网站上的示例所示，但我尝试的所有方法都不起作用。

感谢您的任何建议或帮助。

【问题讨论】：

标签： javascript blueprintjs

【解决方案1】：

您显示的图像不是Suggest 组件的正常样式。您是否包含Suggest CSS 文件？确保添加它，因为这将限制 popover 的高度并使内容可滚动，而不是整个页面高度上的巨大列表。

【讨论】：

感谢您的回答，并为长时间的延迟感到抱歉。我会检查并随时通知您。
非常感谢。这是正确的答案。只有一件事，它是'blueprint-select.css'，但你给了我一个非常强烈的提示；）
很高兴听到我能提供帮助。我之前也遇到过类似的问题，所以我对问题可能是什么有一个倾向。

【解决方案2】：

您应该使用 itemListRenderer 属性。来自docs：

ItemListRenderer 下拉内容的自定义渲染器。

默认实现为传递谓词的每个项目调用 itemRenderer，并将它们全部包装在 Menu 元素中。如果查询为空，则返回 initialContent，如果没有与谓词匹配的项目，则返回 noResults。继承自 IListItemsProps.itemListRenderer

您可以使用自己的渲染器功能自定义道具。在您的情况下，您可能可以解除 the default renderer code 并添加一条将项目数限制为 X 的行。

【讨论】：

感谢您的回答。我使用 itemListRenderer。我认为解决方法是使用 CSS，正如 user5661402 提到的那样。无论如何，我会在测试后立即发布