选择项目时如何更改菜单的背景颜色？答案

【问题标题】：How to change background-color of menu when item is selected?选择项目时如何更改菜单的背景颜色？
【发布时间】：2020-07-28 12:38:21
【问题描述】：

我仍然是 React JS 的初学者，但我在使用示例菜单时遇到了问题。

我有一个菜单，我需要在用户单击菜单时更改背景，以便用户知道他在哪个页面上。我已经做了几次测试，但我仍然无法做到。

这是我在codesandbox中输入的代码：https://codesandbox.io/s/patient-resonance-6pwjh?file=/src/index.js

有人可以帮我吗？

提前谢谢你

【问题讨论】：

试试 CSS a:focus { background-color: ..... }。当<a> 获得焦点（被点击/点击）时，:focus 选择器被触发。

标签： javascript html css reactjs

【解决方案1】：

以下是工作示例：

https://codesandbox.io/s/patient-cherry-tpf50

注意：你需要在package.json文件中添加这个依赖"react-router-dom": "5.2.0"。

反应代码：

import React from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import "./styles.css";

export default function App() {
  return (
    <Router>
      <div className="App">
        <div className="topnav">
          <NavLink to="/home" activeClassName="active">
            Home
          </NavLink>
          <NavLink to="/news" activeClassName="active">
            News
          </NavLink>
          <NavLink to="/contact" activeClassName="active">
            Contact
          </NavLink>
          <NavLink to="/about" activeClassName="active">
            About
          </NavLink>
        </div>
      </div>
    </Router>
  );
}

样式：

.App {
  font-family: sans-serif;
  text-align: center;
}
.topnav {
  overflow: hidden;
  background-color: #333;
}

a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

a.active {
  background-color: #1144ff;
  color: #ffffff;
}

a:hover {
  background-color: #ddd;
  color: black;
}

【讨论】：

最后，非常感谢

【解决方案2】：

我使用样式化组件管理了类似的东西。它允许您根据 props 设置组件的样式。

我有一个带有食谱的页面，顶部有一个类别栏，其中包含用户可以过滤食谱的蛋白质列表。我创建了一个 activeCategory 状态，默认情况下将其设置为“全部”，但是当用户单击它时，它会更改为选择的任何蛋白质。我只是将该状态作为道具传递给 categoryBar 组件，并在所选蛋白质为活动类别时更改了其背景颜色。

您可以在 CategoryBar.js 第 12 行看到我的意思。Picker.js 是父组件，如果您想查看状态。

https://github.com/Taouen/gobble/tree/master/src/components

【讨论】：