设置blueprintjs建议元素中的元素个数
Setting the number of elements in blueprintjs Suggest element
我正在使用 blueprintjs 可视化工具包开发一个 React 应用程序。然而,问题是,与文档中显示的示例不同,我的 <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 }}
/>
有没有办法指定显示多少个元素?我在文档中找不到此设置。
我认为您可以使用 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 可视化工具包开发一个 React 应用程序。然而,问题是,与文档中显示的示例不同,我的 <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 }}
/>
有没有办法指定显示多少个元素?我在文档中找不到此设置。
我认为您可以使用 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)
}}
/>