设置 blueprintjs Suggest 元素中的元素数量答案

【问题标题】：Setting the number of elements in blueprintjs Suggest element设置 blueprintjs Suggest 元素中的元素数量
【发布时间】：2018-03-14 08:17:48
【问题描述】：

我正在使用 blueprintjs 可视化工具包开发一个反应应用程序。然而，问题是，与文档中显示的示例不同，我的<Suggest> 框将显示数组中的所有元素，而不是前 10 个。我当前的代码：

                        <Suggest
                        items={this.props.documentTypes}
                        itemRenderer={(items, meta) => {
                            if (meta.modifiers.matchesPredicate) {
                                return (
                                    <MenuItem
                                        label={items[1]}
                                        key={items[0]}
                                        text={items[1]}
                                        onClick={meta.handleClick}
                                    />
                                );
                            } else {
                                return null;
                            }
                        }}
                        itemPredicate={(query, item) => {
                            let result =
                                `${item[0].toLowerCase()} ${item[1].toLowerCase()}`.indexOf(
                                    query.toLowerCase()
                                ) >= 0;
                            return result;
                        }}
                        inputValueRenderer={item => item[1]}
                        noResults={
                            <MenuItem
                                disabled={true}
                                text="No document types found."
                            />
                        }
                        onItemSelect={this.changeDocType}
                        popoverProps={{ popoverClassName: Classes.MINIMAL }}
                    />

有没有办法指定显示多少元素？我在文档中找不到此设置。

【问题讨论】：

标签： reactjs typescript blueprintjs

【解决方案1】：

我认为您可以使用itemListPredicate 代替itemPredicate。然后使用.filter() 和.slice()。像这样的……

<Suggest
  itemListPredicate={(query, items) => {
    return items.filter((item) => `${item[0].toLowerCase()} ${item[1].toLowerCase()}`.indexOf(query.toLowerCase()) >= 0).slice(0, 10)
  }}
/>

【讨论】：

谢谢！我喜欢 blueprintjs，但有时会发现缺少它的文档。