我正在尝试访问li上的key={1}
元素。
我想达到的目的是将activeItem设置为State,以便稍后将其与单击的对象进行比较。我他们是一样的,我想向该元素添加一个活动类。但是我找不到找到传递给我的handleClick函数的键的方法。
感谢您的帮助。
import Link from 'next/link';
class Navbar extends React.Component {
state = { activeItem: null}
handleClick = (e) => {
};
render() {
console.log(this.state)
return (
<nav className="main-nav">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#">Kategories
<span className="arrow">▼</span>
</a>
<ul className="submenu">
<li
onClick={this.handleClick}
key={1}
>
<Link href={`/news?cat=sport`} ><a>Sport</a></Link>
</li>
<li>
<Link href={`/news?cat=health`}><a>Health</a></Link>
</li>
</ul>
</li>
</ul>
<style jsx>{`
.main-nav {
font-family: "Lato";
font-style: normal;
font-weight: 400;
z-index:100;
-webkit-box-shadow: 1px 3px 23px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 3px 23px -8px rgba(0,0,0,0.75);
box-shadow: 1px 3px 23px -8px rgba(0,0,0,0.75);
}
.main-nav a {
color: #000;
background: #fff;
height: 50px;
font-family: lato;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.4s;
}
.main-nav a:hover {
background: #b4d455;
color: #fff;
border: 1px solid #000;
}
.main-nav a:hover .arrow{
color: #fff;
transform: rotate(0);
}
.main-nav ul {
list-style: none;
display: flex;
}
.main-nav li {
width: 100%;
text-align: center;
position: relative;
}
.main-nav li:hover .submenu > li {
display: block;
flex-direction: column;
top: 0px;
}
.submenu li {
display: none;
position: absolute;
top: 0px;
}
.submenu {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
}
.submenu li {
position: relative;
}
.submenu li:hover .submenu-2 li {
display: block;
}
.arrow {
margin-left: 8px;
color: #000;
font-size: 10px;
transform: rotate(90deg);
}
.active {
background-color: red;
}
`}
</style>
</nav>
);
}
}
export default Navbar;
谢谢你的回答。有用 。但是我不确定这是否是最好的方法。数据键目前不是动态的,我不确定如何在三元组中获取值。
state = { activeItem: null}
handleClick = e => {
this.setState({ activeItem : e.currentTarget.dataset.key })
};
render() {
return (
<nav className="main-nav">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#">Kategories
<span className="arrow">▼</span>
</a>
<ul className="submenu">
<li className={this.state.activeItem == 1 ? 'active' : ''}
onClick={this.handleClick}
data-key={1}
>