极客教程React.js Blueprint Select2自定义菜单
Blueprint 是基于React的Web UI工具包。该库经过优化，非常适用于构建复杂且数据密集的桌面应用程序界面。
在本文中，我们将讨论React.js Blueprint Select2自定义菜单。Select2组件显示一个列表供用户选择一个项目，项目的子项包含在一个MenuItem中，该MenuItem包含列表和可选的InputGroup以过滤项目。Select2允许用户通过更改菜单布局或项目来自定义菜单。
React.js BluePrint Select2属性：
- activeItem ：它表示当前活动的项目，用于键盘交互。
- children ：它表示触发选择popover的元素。
- 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 : 它表示用于添加到Popover目标包装元素的props。
- query : 它表示传递给itemListPredicate或itemPredicate的查询字符串，用于过滤项目。
- resetOnClose : 它决定当Popover关闭时，活动项目是否应重置为第一个匹配项目。
- resetOnQuery : 它决定每次查询更改时，活动项目是否应重置为第一个匹配项目。
- resetOnSelect : 它决定当选择项目时，活动项目是否应重置为第一个匹配项目。
- scrollToActiveItem ：确定当该属性改变时，活动项目是否应始终滚动到视图中。
语法:
<Select2
itemListRenderer={renderCustomMenu}
>
<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
项目结构：
运行应用的步骤： 按照以下步骤运行项目：
npm start
示例1： 下面的示例演示了在选择2组件中使用itemListRenderer属性来使用自定义菜单。
import React, { useState } from "react";
import { Button, MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
const data = ["Java", "Python", "C++", "SQL", "JavaScript"];
function App() {
const [item, setItem] = useState("");
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>ReactJs Blueprint Select2 Custom Menu</h2>
</div>
<Select2
items={data}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent);
}}
active={itemProps.modifiers.active}
style={{
backgroundColor: "#27EA50",
fontWeight: "bold",
}}
/>
);
}}
>
<Button
text={item}
rightIcon="caret-down"
style={{ backgroundColor: "#15D13C",
color: "white" }}
/>
</Select2>
</center>
);
}
export default App;
输出：
示例2： 以下示例展示了在select2组件中使用禁用自定义菜单的用法。
import React, { useState } from "react";
import { Button, MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
const data = ["Java", "Python", "C++", "SQL", "JavaScript"];
function App() {
const [item, setItem] = useState("");
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>ReactJs Blueprint Select2 Custom Menu</h2>
</div>
<Select2
items={data}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
disabled={true}
onClick={(elm) => {
setItem(elm.target.textContent);
}}
active={itemProps.modifiers.active}
style={{
backgroundColor: "#27EA50",
fontWeight: "bold",
}}
/>
);
}}
>
<Button
text={item}
rightIcon="caret-down"
style={{ backgroundColor: "#15D13C",
color: "white" }}
/>
</Select2>
</center>
);
}
export default App;
输出:
参考： https://blueprintjs.com/docs/#select/select2.custom-menu