2

如何使用 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} />;
};

这是我的结果

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

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

4

2 回答 2

5

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

于 2018-12-05T12:44:40.433 回答
0

你应该使用itemListRenderer道具。从文档：

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

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

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

于 2018-11-01T15:05:06.093 回答