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

Question

如何使用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 个项目，如网站上的示例所示，但我尝试的所有方法均无效。

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

Answer 1

你应该使用 itemListRenderer 道具。来自 docs:

ItemListRenderer Custom renderer for the contents of the dropdown.

The default implementation invokes itemRenderer for each item that passes the predicate and wraps them all in a Menu element. If the query is empty then initialContent is returned, and if there are no items that match the predicate then noResults is returned. Inherited from IListItemsProps.itemListRenderer

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

Answer 2

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

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

BlueprintJS : SUGGEST => How to limit the row number on the popover?

javascript

blueprintjs