React Bootstrap：在导航下拉菜单中使用事件键

介绍

前端开发包括用户体验 (UX) 和用户界面 (UI) 设计，这两者都决定了您的应用程序对于目标用户的自然程度、人体工程学和可用性。

在 Web 应用中，页面设计中的一个关键组件是导航栏。它不仅要响应迅速、引人注目、功能齐全，还必须节省有限的空间。导航栏中的某些菜单项本质上是分层的，必须以下拉方式呈现。这就是导航下拉菜单的用武之地。这些组件是导航栏的一部分，但从层次上讲，它们只有在选择或悬停在父项上时才可见。此功能允许前端开发人员设计更整洁的导航栏，因为菜单信息紧凑。它还允许对菜单项之间的层次关系进行建模。

假设您是一名签约的前端 React 开发人员。客户希望用 React 为他们的咨询公司开发一个网站。他们根据客户制定不同的定价层级，包括基础版、公司版和企业版定价模式。客户希望每个层级都有一个页面，并有一个紧凑的菜单，指出更多定价模式即将推出。所有这些指向定价页面的链接都不能放在导航菜单上。作为咨询开发人员，您有责任在网站的导航菜单上实现这一点。您决定使用导航下拉菜单。

在本指南中，您将了解如何在 React Bootstrap 导航下拉菜单中实现事件键。本指南假设您至少具有中级React 和 Bootstrap 组件知识。

设置示例应用程序

打开你的终端并运行这些命令来创建一个基本的 React 应用程序。

      npx create-react-app react-bootstrap-navdropdown

cd react-bootstrap-navdropdown

npm start

在你的基本 React 应用程序中包括 React Bootstrap。

      npm install react-bootstrap bootstrap

删除新创建的App.js文件中的代码，并粘贴下面的示例代码。

      import React, {Component} from 'react';

class App extends Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                
            </div>
        );
    }

}


export default App;
    

在您的app.js文件中，也包含样式表。

      import 'bootstrap/dist/css/bootstrap.min.css';

您现在可以导入 Bootstrap 组件，例如：

      import { Nav } from 'react-bootstrap';
    

设置导航栏和下拉菜单

复制并粘贴下面的示例代码来创建带有单个下拉菜单的导航栏。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav, NavDropdown} from "react-bootstrap";

class App extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Nav variant="pills" activeKey="1" 
                >
                <Nav.Item>
                    <Nav.Link eventKey="home" href="#/home">
                        Home
                    </Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="about" title="Item">
                        About
                    </Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="contact" >
                        Contact
                    </Nav.Link>
                </Nav.Item>
                <NavDropdown title="Pricing" id="nav-dropdown">
                    <NavDropdown.Item eventKey="Basic Pricing">Basic</NavDropdown.Item>
                    <NavDropdown.Item eventKey="Corporate Pricing">Corporates</NavDropdown.Item>
                    <NavDropdown.Divider />

                    <NavDropdown.Item eventKey="Enterprise pricing">Enterprise</NavDropdown.Item>
                </NavDropdown>
            </Nav>
        );
    }
}

export default App;
    

在上面的代码中，您有一个包含导航项和导航链接的导航组件。您还添加了一个包含三个项目的导航下拉菜单，最后一个项目用分隔符隔开。目前，您只能查看导航栏和下拉菜单。在下一节中，您将学习如何跟踪每个选定的项目。

处理选择过程

复制并粘贴下面的示例代码。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav, NavDropdown} from "react-bootstrap";

class App extends Component{
    constructor(props) {
        super(props);
        this.state =({
            key: "home"
        })
        this.handleSelect = this.handleSelect.bind(this)

    }

    handleSelect(key){
        this.setState({
            key: key
        })
        alert(`selected ${key}`)
    }

    render() {
        return (
            <Nav variant="tabs" activeKey="home"
                 onSelect={this.handleSelect}
            >
                <Nav.Item>
                    <Nav.Link eventKey="home" href="#/home">
                        Home
                    </Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="about" title="about">
                        About
                    </Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="contact" >
                        Contact
                    </Nav.Link>
                </Nav.Item>
                <NavDropdown title="Pricing" id="nav-dropdown">
                    <NavDropdown.Item eventKey="Basic pricing">Basic</NavDropdown.Item>
                    <NavDropdown.Item eventKey="Corporate Pricing">Corporates</NavDropdown.Item>
                    <NavDropdown.Divider />

                    <NavDropdown.Item eventKey="Enterprise Pricing">Enterprise</NavDropdown.Item>
                </NavDropdown>
            </Nav>
        );
    }
}

export default App;
    

在上面的代码中，您添加了一个onSelect函数。这会调用您的handleSelect函数，该函数会使用已选择哪个导航项的信息来更新键状态。为了帮助您跟踪所选项目，请添加一个显示所选键的警报。onSelect 函数还将处理所选下拉列表。

要添加下拉项的链接，请在NavDropdown.item内添加Nav.link标签。

请参阅下面的示例代码。

      <NavDropdown title="Pricing" id="nav-dropdown">
                    <NavDropdown.Item>
                        <Nav.Link eventKey="Basic" href="#home">
                            Basic Pricing
                        </Nav.Link>
                    </NavDropdown.Item>
                    <NavDropdown.Item>
                        <Nav.Link eventKey="Corporate" href="#">
                            Corporate Pricing
                        </Nav.Link>
                    </NavDropdown.Item>
                    <NavDropdown.Divider />

                    <NavDropdown.Item>
                        <Nav.Link eventKey="Enterprise" href="#">
                            Enterprise Pricing
                        </Nav.Link>

                    </NavDropdown.Item>
                </NavDropdown>
    

结论

现在，您已经了解了在 React Bootstrap 组件的导航下拉菜单中使用事件键的技术。此技能非常适合从事 React 开发人员、前端开发人员以及有时从事 UI/UX 开发人员工作的人员。要进一步了解本指南，请探索React Bootstrap中的其他组件，以掌握构建整个网站的方法。这些包括警报、卡片、手风琴等等。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文