极客教程React.js Blueprint MultiSelect Props 接口
Blueprint 是一个基于React的Web界面工具包。该库非常优化，适用于构建复杂和数据密集的桌面应用程序界面。
本文将讨论React.js Blueprint MultiSelect Props接口。MultiSelect组件通过一个用户可以选择多个项目的列表的UI来显示。MultiSelect使用Popober包装的TagInput进行渲染。
React.js Blueprint MultiSelect Props:
- activeItem： 它表示当前活动的项目，用于键盘交互。
- className： 它表示要传递给子元素的类名列表。
- createNewItemFromQuery： 它允许从当前提供的查询字符串创建新项目。
- createNewItemPosition： 它表示createNewItem在列表中的位置，可以是第一个或最后一个。
- createNewItemRenderer： 它可以从当前查询字符串中创建一个可选择的 Create Item 选项。
- disabled： 它指定组件是禁用还是可交互的。
- fill：
- fullWidth: 它确定组件是否应占据其容器的全部宽度。
- initialContent: 它表示在查询字符串为空时渲染的默认React组件。
- inputProps: 它表示要传递给查询InputGroup的props。
- itemDisabled: 它确定给定的项是否被禁用。
- itemListPredicate: 它用于自定义整个项数组的查询。
- itemListRenderer: 它用于自定义渲染下拉菜单的内容。
- itemPredicate: 它用于自定义单个项的查询。
- itemRenderer： 它用于在下拉列表中自定义渲染项目。
- items： 它表示列表中的项目数组。
- itemsEqual： 它用于确定两个项目是否相等。
- menuProps： 它表示用于扩展到包含可选择选项的菜单列表框中的props。
- noResults： 当过滤返回零结果时，它用于渲染一个React组件。
- onActiveItemChange： 这是一个回调函数，当用户操作更改活动项目时被调用。
- onItemSelect： 这是一个回调函数，在列表中选择一个项目时被调用，通常是通过点击或按下回车键来触发。
- onItemsPaste: 这是一个回调函数，在同时选择多个项目时被调用。
- onClear: 它将在TagInput内部呈现一个清除按钮。
- onQueryChange: 这是一个回调函数，当查询字符串发生变化时被调用。
- onRemove: 这是一个回调函数，当通过在TagInput中删除标签来从选择中移除项目时被调用。
- openOnKeyDown: 它决定了组件是否应该在TagInput中的按键按下事件之前等待以打开其弹出窗口。
- placeholder: 它表示输入框的占位符文本。
- popoverContentProps:
- popoverProps: 这表示要传播给Popover的属性。
- popoverRef: 这表示Popover2实例的可选引用。
- popoverTargetProps: 这表示要添加到弹框目标包装元素的属性。
- query: 这表示传递给itemListPredicate或itemPredicate以筛选项目的查询字符串。
- resetOnClose: 这确定弹出框关闭时活动项目是否应重置为第一个匹配的项目。
- resetOnQuery: 这确定每次查询更改时活动项目是否应重置为第一个匹配的项目。
- resetOnSelect: 确定当选择一个项目时，活动项目是否应该重置为第一个匹配的项目。
- scrollToActiveItem: 确定活动项目是否在属性更改时始终滚动到视图中。
- selectedItems: 表示受控选定值的列表。
- tagInputProps: 表示传播到TagInput的props。
- tagRenderer: 用于将项目转换为标签内容。
语法：
<MultiSelect
items={ITEM_DATA}
onClear={...}
...
/>
创建React应用并安装模块：
步骤1 ：使用以下命令创建React应用：
npm create-react-app appname
步骤2： 在创建好项目文件夹 appname 后，使用以下命令进入该文件夹：
cd appname
步骤3 ：创建ReactJS应用程序后，使用以下命令安装所需的模块：
npm install @blueprintjs/core
项目结构：
步骤4： 运行项目如下：
npm start
示例1： 下面的示例演示了使用MultiSelect组件的items、selectedItems、tagRenderer、onItemSelect、onRemove、onClear等属性。
import { MultiSelect } from "@blueprintjs/select";
import { MenuItem } from "@blueprintjs/core";
import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import { useState } from "react";
export default function App() {
const [item, setItem] = useState("Stack");
const [items, setItems] = useState([]);
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>ReactJs Blueprint MultiSelect Props Interface</h2>
</div>
<div style={{ width: 700 }}>
<MultiSelect
items={["Stack", "Queue",
"Linked List", "Array", "Heaps"]}
selectedItems={items}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent);
setItems((items) => {
return [...items,
elm.target.textContent];
});
}}
active={itemProps.modifiers.active}
/>
);
}}
onItemSelect={() => { }}
tagRenderer={(item) => item}
onRemove={(item) => {
setItems((items) => items.filter(
(elm) => elm !== item));
}}
onClear={() => setItems([])}
/>
</div>
</center>
);
}
输出：
示例2： 下面的示例演示了MultiSelect组件的activeItems和placeholder属性的用法。
import { MultiSelect } from "@blueprintjs/select";
import { MenuItem } from "@blueprintjs/core";
import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import { useState } from "react";
export default function App() {
const [item, setItem] = useState("Python");
const [items, setItems] = useState([]);
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>ReactJs Blueprint MultiSelect Props Interface</h2>
</div>
<div style={{ width: 700 }}>
<MultiSelect
activeItem={item}
items={["Stack", "Queue", "Linked List",
"Array", "Heaps"]}
selectedItems={items}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent);
setItems((items) => {
return [...items,
elm.target.textContent];
});
}}
active={itemProps.modifiers.active}
/>
);
}}
placeholder="Select data structures..."
onItemSelect={() => { }}
tagRenderer={(item) => item}
onRemove={(item) => {
setItems((items) => items.filter(
(elm) => elm !== item));
}}
onClear={() => setItems([])}
/>
</div>
</center>
);
}
输出：
参考： https://blueprintjs.com/docs/#select/multi-select.props-interface