Question

我有这个导航栏（NavBar），基本上是字典列表：

active

Your Videos确定哪个菜单项具有令人敬畏的橙色样式。我的问题是，无论您单击什么，默认登录页面active: true始终使用橙色样式。

我想找到一种方法，当用户单击菜单项时，它将变为橙色样式（active: false），其余的将变为import React, { Component } from "react"; import "./Header.css"; import { withRouter } from "react-router-dom"; import logo from "../photos/logo_small.png"; class Header extends Component { constructor() { super(); this.state = { showForm: false, activeItem: null }; } showForm() { this.setState({ showForm: !this.state.showForm }); } // Changes which menu item has orange bar on it onChangeHandler = () => { this.setState({ activeItem: navItem1 }); }; render() { let links = [ { label: "Your Videos", link: "/landingpage/videos" }, { label: "Stats", link: "/landingpage/stats" }, { label: "Process", link: "/landingpage/process" }, { label: "Contact", link: "/landingpage/contact" } ]; let linksMarkup = links.map((link, index) => { let linkMarkup = link.active ? ( <a className="menu__link menu__link--active" href={link.link}> {link.label} </a> ) : ( <a className="menu__link" href={link.link}> {link.label} </a> ); return ( <li key={index} className="menu__list-item" onChange={this.onChangeHandler(thisNavItem)} className={this.state.activeItem === navItem1 ? blue : orange} > {linkMarkup} </li> ); }); return ( <nav className="menu"> <a href="/landingpage/videos"> <div style={{ backgroundImage: "url(" + logo + ")" }} className="menu__logo" /> </a> <div className="menu__right"> <ul className="menu__list">{linksMarkup}</ul> </div> </nav> ); } } export default withRouter(Header);。

我已经尝试使用Javascript函数来做到这一点，但是老实说，我不确定除此之外该从哪里开始。

编辑：我的Header.jsx：


/* MENU STYLING */
.blue {
  color: orange;
}

.white {
  color: white;
}

我的Header.css：

{u'correlation_id': u'6678c42e-6935-4f53-86e9-f00f5a31f8c2',
u'error': u'invalid_grant',
u'error_codes': [9002313],
u'error_description': u'AADSTS9002313: Invalid request. Request is malformed or invalid.\r\nTrace ID: db3676d4-5d5d-4104-96c9-f3fd92d01300\r\nCorrelation ID: 6678c42e-6935-4f53-86e9-f00f5a31f8c2\r\nTimestamp: 2019-06-04 10:06:54Z',
u'timestamp': u'2019-06-04 10:06:54Z',
u'trace_id': u'db3676d4-5d5d-4104-96c9-f3fd92d01300'}

Answer 1

将链接置于状态，在onClick中更新其活动属性。

Answer 2

You can use ReactJs state in order to accomplish your task.

我认为主动没有意义。只是通过类来区分。像这样定义两个类：

.blue {
    color: blue;
}

.orange {
    color: orange;
}

您的状态可能如下所示：

state: {
   activeItem: null;
}

然后对您的onChange事件和处理程序使用类似的代码：

onChange={this.onChangeHandler(thisNavItem)}

onChangeHandler = () => (this.setState({
        activeItem: navItem1;
    ))

然后仅基于状态添加类，如下所示：

className={{this.state.activeItem === navItem1 ? blue : orange }}

如何使用onMouseDown动态更新NavBar变量？

2 个答案: