1

我正在使用 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 }}
                    />

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

4

1 回答 1

1

我认为您可以使用itemListPredicate而不是itemPredicate. 然后使用.filter()and .slice()。像这样的东西...

<Suggest
  itemListPredicate={(query, items) => {
    return items.filter((item) => `${item[0].toLowerCase()} ${item[1].toLowerCase()}`.indexOf(query.toLowerCase()) >= 0).slice(0, 10)
  }}
/>
于 2018-03-15T03:20:50.613 回答