React.js蓝图可访问性焦点管理

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

在本文中，我们将讨论React.js蓝图可访问性焦点管理。蓝图提供了管理焦点样式外观的实用程序，当使用鼠标点击或按下 tab 键时，显示在活动元素周围的蓝色发光轮廓。我们可以使用蓝图的FocusStyleManager组件在我们的应用程序中显式启用此功能。

语法：

import { FocusStyleManager } from "@blueprintjs/core";
FocusStyleManager.onlyShowFocusOnTabs();

创建React应用程序并安装模块：

步骤1： 使用以下命令创建React应用程序：

npm create-react-app appname

步骤2: 创建您的项目文件夹，即应用程序名称后，使用以下命令切换到该文件夹：

cd appname

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

npm install @blueprintjs/core

项目结构：

React.js蓝图可访问性焦点管理

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

npm start

示例1: 下面的示例演示了在InputGroup组件中使用焦点的用法。在这里，只有在按下Tab键时，InputGroup才会获得焦点，因为使用了onlyShowFocusOnTabs()方法。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { InputGroup, FocusStyleManager } from "@blueprintjs/core"; 
  
FocusStyleManager.onlyShowFocusOnTabs(); 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center",  
                color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJs BluePrint Accessibility Focus management 
                </h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <InputGroup placeholder= 
                    "Click here for focus" 
                    style={{ width: 400 }} /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React.js蓝图可访问性焦点管理

示例2： 下面的示例演示了在Button组件中使用焦点的用法。在这里，当我们按下Tab键时，按钮才会获得焦点，在鼠标点击时不会获得焦点，因为使用了onlyShowFocusOnTabs()方法。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, FocusStyleManager } from "@blueprintjs/core"; 
  
FocusStyleManager.onlyShowFocusOnTabs(); 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJs BluePrint Accessibility Focus management 
                </h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <Button text="Click here for focus" /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;