极客教程React.js蓝图Select2创建新项
React.js蓝图 是一个前端UI工具包。它非常优化和流行，适用于构建复杂数据密集型的桌面应用程序界面。
React.js蓝图Select2组件为用户提供了一个项目列表，并提供一个搜索框，用于在列表中搜索项目或添加新项目到列表中。
createNewItemFromQuery 属性将用户查询转换为Select2组件可理解的表单，而 createNewItemRenderer 则呈现最终将显示在列表中的项目。
Select2属性：
- className： 它是一个由空格分隔的类名列表，用于传递给子元素。
- createNewItemFromQuery： 它可帮助从查询字符串中创建新项。
- createNewItemPosition： 它指定了新项在列表中的位置。
- activeItem： 当前在列表中获得焦点的项。
- createNewItemRenderer： 它可将当前的查询字符串转化为可选择的列表选项。
- disabled： 它是一个布尔值，用于判断组件是否处于活动状态。
- fill： 它是一个布尔值，用于确定组件是否应该占据其容器的全部宽度。
- filterable: 它是一个布尔值。它决定了下拉列表是否可以被过滤。
- initialContent: 当查询字符串为空时，它定义了初始字符串。
- inputProps: 它定义了要传递给查询InputGroup的props。
- itemDisabled: 一个回调函数，用于确定给定的项是否被禁用。
- itemListPredicate: 它自定义查询数组。
- itemListRenderer: 它渲染下拉列表的内容。
- itemPredicate: 它自定义列表中每个项的查询。
- itemRenderer:
- 这是一个为下拉列表中的项目定制的渲染器。
- items： 它确定数组项的列表。
- itemsEqual： 用于比较两个列表项的比较器。
- menuProps： 将传播给包含可选选项的菜单列表框的菜单props。
- noResults： 当过滤项目返回没有结果时要渲染的内容。
- onActiveItemChange： 当用户移动到其他项目时触发的回调函数。
- onItemSelect： 当选择一个项目时触发的无返回值回调函数。
- onItemsPaste： 当选择多个项目时触发的无返回值回调函数，即当我们粘贴时。
- onQueryChange: 当查询字符串改变时，触发的空回调函数。
- popoverContentProps: 弹出框属性传播到内容容器元素。
- popoverProps: 弹出框属性传播。
- popoverRef: 弹出框组件的引用。
- popoverTargetProps: 定义要添加到弹出框目标容器元素的属性。
- query: 传递给渲染函数的字符串。
- resetOnClose: 是一个布尔值，确定在弹出框关闭时是否将活动项目重置为第一个匹配项。
- resetOnQuery: 它是一个布尔值，确定是否每次发生任何更改时，活动项目是否应该重置为第一个匹配项。
- resetOnSelect： 它是一个布尔值，确定当选择一个项目时，活动项目是否应该重置为第一个匹配项。
- scrollToActiveItem： 它是一个布尔值，确定当属性改变时，活动项目是否应该始终滚动到视图中。
语法：
<Select2
createNewItemFromQuery={}
createNewItemRenderer={}
/>
先决条件：
- 介绍和安装 ReactJS.
- ReactJS 蓝图 MenuItem.
- React Hook useState.
创建 React 应用程序和模块安装：
步骤1： 创建 React 项目文件夹，打开终端，输入命令 npm create-react-app 文件夹名称（如果已经全局安装了 create-react-app）。如果没有全局安装，使用命令全局安装 create-react-app： npm -g create-react-app 或者通过以下命令本地安装： npm i create-react-app 。
npm create-react-app project
步骤2： 创建好项目文件夹（例如：project）之后，使用以下命令切换到该文件夹。
cd project
步骤3： 现在使用以下命令安装依赖项：
npm install @blueprintjs/core
npm install @blueprintjs/select
项目结构： 它将如下所示。
示例1： 我们从“@blueprintjs/core”中导入MenuItem，从“@blueprintjs/select”中导入Select2。为了应用组件的默认样式，我们导入了“@blueprintjs/core/lib/css/blueprint.css”和“@blueprintjs/select/lib/css/blueprint-select.css”。我们添加了Select2组件，添加了渲染我们传递的项目列表的MenuItem组件，并将一个自定义函数addText传递给createNewItemFromQuery属性，该函数返回一个字符串，而createNewItemRenderer属性返回该值。
App.js
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/select/lib/css/blueprint-select.css";
function App() {
const addText = (s) => {
return s;
}
return (
<div style={{ margin: 30 }}>
<h3>ReactJs Blueprint Select2 Creating new items</h3>
<Select2
createNewItemFromQuery={addText}
createNewItemRenderer={(val) => {
return val;
}}
items={[
"Blockchain",
"Internet of things"
]}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
/>
);
}}
onItemSelect={() => { }}
>
<button> Click Me !</button>
</Select2>
</div>
);
}
export default App;
运行应用程序的步骤：
使用以下命令从项目的根目录运行应用程序。
npm start
输出：
示例2： 在这个示例中，在上面的代码中，我们使用React的useState hook创建了一个项状态，它将项添加到列表中。
App.js
import React, { useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/select/lib/css/blueprint-select.css";
function App() {
const [item, setItem] = useState("");
const addItem = (s) => {
return s;
}
return (
<div style={{ margin: 30 }}>
<h3>ReactJs Blueprint Select2 Creating new items</h3>
<Select2
createNewItemFromQuery={addItem}
createNewItemRenderer={(val) => {
return <MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent);
}}
/>
}}
items={[
"Blockchain",
"Internet of things"
]}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent);
}}
/>
);
}}
onItemSelect={setItem}
>
<button>click me</button>
<h5>Selected : {item}</h5>
</Select2>
</div>
);
}
export default App;
运行应用程序的步骤： 从项目根目录使用以下命令来运行应用程序。
npm start
输出：
参考： https://blueprintjs.com/docs/#select/select2.creating-new-items