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中的其他组件,以掌握构建整个网站的方法。这些包括警报、卡片、手风琴等等。
免责声明:本内容来源于第三方作者授权、网友推荐或互联网整理,旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有,其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况,请与我们取得联系,我们将尽快进行相关处理与修改。感谢您的理解与支持!
请先 登录后发表评论 ~