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