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

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

Answer 2

您应该使用itemListRenderer道具。来自docs：

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

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

您可以使用自己的渲染器功能自定义道具。就您而言，您可以抬起the default renderer code并在其中将项目数限制为X的行中添加一行。

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

2 个答案: