React.js蓝图 Select2受控用法

蓝图是基于React的用于Web的UI工具包。该库在构建复杂且数据密集的桌面应用程序界面方面非常优化和流行。

在本文中，我们将讨论 React.js蓝图Select2的受控用法 。 Select2组件 显示一个项目列表以选择一个项目，并且项的子项被包裹在一个包含列表和一个可选的InputGroup用于过滤项目的MenuItem中。我们可以使用activeItem和query属性来控制列表的输入值和项目。

React.js蓝图Select2属性：

activeItem : 指示当前活动的项目，用于键盘交互。
children : 它表示触发选择弹出框的元素。
className : 它表示要传递给子元素的类名列表。
createNewItemFromQuery : 它允许从提供的当前查询字符串创建新项目。
createNewItemPosition : 它表示在列表中创建新项目的位置，可以是第一个或最后一个。
createNewItemRenderer : 它帮助创建可选择的从当前查询字符串创建项目的选项。
disabled : 它表示是否禁用。
disabled ：它指定组件是否被禁用或者是可交互的。
fill ：它决定组件是否占据容器的全部宽度。
filterable – 它决定下拉列表是否可以被筛选。
initialContent ：当查询字符串为空时，它表示默认的React组件渲染。
inputProps – 它表示要传递给查询InputGroup的props。
itemDisabled ：它决定给定的项是否被禁用。
itemListPredicate ：它用于定制整个项数组的查询方式，作为props传递。
itemListRenderer ：用于自定义渲染下拉列表的内容。
itemPredicate ：用于自定义查询 items 数组中单个项。
itemRenderer ：用于自定义渲染下拉列表中的项。
items ：表示列表中的项数组。
itemsEqual ：用于确定两个项是否相等。
menuProps ：表示用于向包含可选项的菜单列表框中传播的 props。
noResults ：在过滤结果为零时，用于渲染一个 React 组件。
onActiveItemChange ：这是一个回调函数，当用户交互改变活动项时触发。
onItemSelect ：这是一个回调函数，当列表中的项目被选中时触发，通常是通过点击或按下回车键。
onItemsPaste ：这是一个回调函数，当多个项目被同时选中时触发。
onQueryChange ：这是一个回调函数，在查询字符串改变时触发。
popoverContentProps - 它表示用于传播到Popover2内容包装器元素的属性。
popoverProps ：它表示要传播到Popover的属性。
popoverRef - 它表示Popover2实例的可选ref。
popoverTargetProps - 它表示用于将props添加到popover目标包装元素的props。
query ：它表示传递给itemListPredicate或itemPredicate的查询字符串，用于过滤项目。
resetOnClose - 它确定在popover关闭时是否将活动项目重置为第一个匹配的项目。
resetOnQuery ：它确定在每次查询更改时是否将活动项重置为第一个匹配的项目。
resetOnSelect ：它确定在选择项目时是否将活动项目重置为第一个匹配的项目。
scrollToActiveItem ：它决定了当该属性改变时，是否应该始终将活动项滚动到视图中。

语法：

<Select2
    activeItem={...}
    onActiveItemChange={...}
    query={...}
    onQueryChange={...}>

    <Button disabled={true}>
</Select2>

创建React应用并安装模块：

步骤1： 使用以下命令创建一个React应用：

npm create-react-app appname

步骤2 ：创建你的项目文件夹，例如appname，使用以下命令切换到它：

cd appname

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @blueprintjs/core
npm install @blueprintjs/select

项目结构：

React.js蓝图 Select2受控用法

步骤4： 按以下方式运行项目：

npm start

示例1： 下面是一个示例，演示了在“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("Java"); 
    const [items, setItems] = useState([]); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeek</h1> 
                <h2>ReactJs Blueprint Select2 Controlled usage</h2> 
            </div> 
            <Select2 
                items={data} 
                activeItem={data[4]} 
                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" /> 
            </Select2> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js蓝图 Select2受控用法

示例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(""); 
    const [items, setItems] = useState([]); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint Select2 Controlled usage</h2> 
            </div> 
            <Select2 
                items={data} 
                activeItem={data[2]} 
                onQueryChange={setItem} 
                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} 
                        /> 
                    ); 
                }} 
            > 
                <Button text={item} rightIcon="caret-down" /> 
            </Select2> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js蓝图 Select2受控用法