菜单项的活动类，它不应该激活所有列表

Question

您好，我正在尝试将活动类分开维护，但是同时保持活动的所有列表，并且它应该为单独的li切换活动类...任何人都可以在这方面提供帮助..

这是代码沙盒的链接：https://codesandbox.io/s/autumn-butterfly-4wjr7?file=/src/App.js:0-650

import React, { Component } from "react";
import './styles.css'
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
isactive: true
};
}
clicked = e => {
this.setState({
isactive: !this.state.isactive
});
};
render() {
const lits = ["Menu 1", "Menu 1", "Menu 3", "Menu 4"];
return (
<div>
{lits.map((list, key) => (
<ul key={key}>
<li className={this.state.isactive ? 'active' : 'notactive'}
onClick={this.clicked}>
{list}
</li>
</ul>
))}
</div>
);
}
}

.css

active {
font-weight: 600;
color: blue
}
.notactive {
font-weight: 0;
}

Answer 1

您可以为状态设置一个索引，并使用它来切换类 -

import React, { Component } from "react";
import "./styles.css";
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
activeIndex: 0
};
}
clicked = index => {
this.setState({ activeIndex: index });
};
render() {
const lits = ["Menu 1", "Menu 1", "Menu 3", "Menu 4"];
return (
<div>
{lits.map((list, key) => (
<ul key={key}>
<li
className={
this.state.activeIndex === key ? "active" : "notactive"
}
onClick={this.clicked.bind(this, key)}
>
{list}
</li>
</ul>
))}
</div>
);
}
}

Answer 2

这里

export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
activeKey: -1
};
}
clicked = key => {
this.setState({
activeKey: key
});
};
render() {
const lits = ["Menu 1", "Menu 2", "Menu 3", "Menu 4"];
return (
<div>
{lits.map((list, key) => (
<ul key={key}>
<li
className={this.state.activeKey === key ? "active" : "notactive"}
onClick={() => this.clicked(key)}
>
{list}
</li>
</ul>
))}
</div>
);
}
}