极客教程React.js蓝图Select2
Blueprint是一个基于React的Web UI工具包。这个库非常优化，用于构建复杂和数据密集的桌面应用程序的界面很受欢迎。
在本文中，我们将讨论React.js蓝图Select2。Select2组件显示一个选择项目列表，项目子项被包装在包含列表和可选InputGroup的MenuItem中以过滤项目。
React.js BluePrint Select2属性：
- activeItem ：它表示当前处于活动状态的项目，用于键盘交互。
- children： 它表示触发选择弹出框的元素。
- className： 它表示要传递给子元素的类名列表。
- createNewItemFromQuery： 它允许从当前查询字符串中创建新的项目。
- createNewItemPosition： 它表示在列表中的createNewItem位置，可以是第一个或最后一个。
- createNewItemRenderer： 它帮助从当前查询字符串创建可选择的”Create Item”选项。
- disabled： 它表示是否禁用。
-
disabled： 它指定组件是否被禁用或可交互。
- fill： 它决定组件是否应该占据其容器的整个宽度。
- filterable： 它决定下拉列表是否可被过滤。
- initialContent： 它表示当查询字符串为空时默认渲染的React组件。
- inputProps： 它表示用于传播到查询InputGroup的props。
- itemDisabled： 它决定给定的项是否被禁用。
- itemListPredicate： 它用于自定义整个项目数组的查询，作为props传递。
- itemListRenderer： 用于自定义渲染下拉框中的内容。
- itemPredicate： 用于自定义查询项目数组中个别项目的方式。
- itemRenderer： 用于自定义渲染下拉列表中的项目。
- items： 表示列表中的项目数组。
- itemsEqual： 用于确定两个项目是否相等。
- menuProps： 表示要传递给包含可选择选项的菜单列表框的属性。
- noResults： 当过滤返回零结果时，用于渲染一个React组件。
- onActiveItemChange： 这是一个回调函数，当用户交互改变活动项目时被调用。
- onItemSelect： 这是一个回调函数，当列表中的项目被选中时被调用，通常是通过点击或按下回车键进行选择。
- onItemsPaste： 这是一个回调函数，当多个项目同时被选中时被调用。
- onQueryChange： 这是一个回调函数，当查询字符串被改变时被调用。
- popoverContentProps： 它表示用于传播到Popover2内容包装器元素的属性。
-
popoverProps： 它表示传播到Popover的属性。
- popoverRef: 它表示Popover2实例的可选引用。
- popoverTargetProps: 它表示用于添加到弹出目标包装元素的props。
- query: 它表示传递给itemListPredicate或itemPredicate的查询字符串，用于过滤项目。
- resetOnClose: 当弹出窗口关闭时，确定是否将活动项目重置为第一个匹配项。
- resetOnQuery: 每次查询变化时，确定是否将活动项目重置为第一个匹配项。
- resetOnSelect: 在选择项目时，确定是否将活动项目重置为第一个匹配项。
- scrollToActiveItem: 它决定当prop改变时，是否始终将活动项滚动到可见区域。
语法:
<Select2>
<Button disabled={true}>
</Select2>
创建React应用程序并安装模块：
步骤1： 使用以下命令创建React应用：
npm create-react-app appname
步骤2： 在创建好的项目文件夹，即appname中，使用以下命令切换到该文件夹中：
cd appname
步骤3 ：创建ReactJS应用程序后，使用以下命令安装所需的模块：
npm install @blueprintjs/core
步骤4： 安装@blueprintjs Select组件。
npm install @blueprintjs/select
项目结构：
步骤5： 运行项目如下：
npm start
示例1： 下面的示例演示了select2组件的使用。
import React, { useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/select/lib/css/blueprint-select.css";
function App() {
const [item, setItem] = useState("Select");
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>ReactJs Blueprint Select2</h2>
</div>
<Select2
items={[
"C++",
"Java",
"Python",
"JavaScript",
"SQL"
]}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent);
}}
/>
);
}}
onItemSelect={() => { }}
>
<Button text={item} />
</Select2>
</center>
);
}
export default App;
输出：
示例2: 下面的示例演示了禁用select2组件的用法。
import React, { useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/select/lib/css/blueprint-select.css";
function App() {
const [item, setItem] = useState("Select");
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>ReactJs Blueprint Select2</h2>
</div>
<Select2
disabled={true}
items={[
"C++",
"Java",
"Python",
"JavaScript",
"SQL"
]}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent);
}}
/>
);
}}
onItemSelect={() => { }}
>
<Button text={item} />
</Select2>
</center>
);
}
export default App;
输出：
参考资料: https://blueprintjs.com/docs/#select/select2