javascript - 无法使用 React 实现侧导航栏
问题描述
我想使用 react 实现一个汉堡包侧导航栏,但我无法实现必须在单击汉堡包时显示的更改。我仍在学习 React,所以请解释我做错了什么,并随时提出替代方法。这是我的代码。
import React from 'react';
import * as FaIcons from "react-icons/fa";
class Navbar extends React.Component {
constructor() {
super();
this.state = {
navbarState : 1,
style : {}
}
}
openNav() {
this.setState({"width" : "250px"});
}
closeNav() {
this.setState({"width" : "0px"});
}
handleClick() {
this.setState((prevState) => {
if(prevState.navbarState === 0) {
return {navbarState : 1, style : {width : '250px'}};
}
else {
return {navbarState : 0, style : {width : '0px'}};
}
});
}
render() {
return (
<div>
<div id="mySidenav" className="sidenav" style={this.state.style} >
{console.log(this.state.navbarState)}
<a href="#" className="closebtn" onClick={() => this.handleClick}>×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<span onClick={() => this.handleClick}>
{/* <FaIcons.FaBars /> */}
<div className = "hamburger">
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
</div>
</span>
</div>
);
}
}
export default Navbar;
我的CSS如下:
.hamburger{
position: absolute;
cursor: pointer;
margin: 5px;
right: 5%;
top: 5%;
}
.line{
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav-active {
height: 100%; /* 100% Full-height */
width: 250px; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a, .sidenav-active a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav-active a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenav-active .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
解决方案
首先,看起来您正在使用基于类的组件并且您没有handleClick
正确绑定您的函数。解决方案是将其绑定到您的constructor
或使用箭头函数,如下所示:
handleClick = () => { ... }
这将类似地适用于您的其他两个功能。有关箭头函数和在基于类的组件中绑定函数的更多信息,请参阅:https ://reactjs.org/docs/faq-functions.html
其次,我怀疑handleClick
在你的<span>
. 代替
<span onClick={() => this.handleClick} ... />
尝试
<span onClick={this.handleClick} ... /> or <span onClick={() => this.handleClick()} ... />
让我知道这是否有帮助!
推荐阅读
- angular - 错误请求 400 JSON 解析错误
- c# - 错误无法隐式转换类型
- symfony - Symfony EventSubscriber:页面没有正确重定向
- sql - DAX测量的最大分区等效?
- javascript - 如何为 DataTables 中的按钮分配 ID?
- mysql - 二级索引中的列顺序
- javascript - 选择深度嵌套的复选框需要使用 jQuery 选择父复选框
- python - 如何获取今天 - PySpark(SQL) 中的“6 个月”日期
- javascript - 在具有更大键的对象数组中查找元素
- python - 如何在 Python 中从日期和小时字符串中删除小时数