如何在单击时更改为活动

Question

我有一个列表，它已经设置为活动，我的意思是第一个列表已经是活动的，但我的问题是如何使其他列表活动也只有当它被点击，只要它被点击，并在同一页面上保持活动

return (
<div className="sidebar">
<div className="sidebarWrapper">
<div className="sidebarMenu">
<h3 className="sidebarTitle">Dashboard</h3>
<ul className="sidebarList">
<Link to="/" className="link">
<li className="sidebarListItem active">
<LineStyleIcon className="sidebarIcon" />
Home
</li>
</Link>
<li className="sidebarListItem">
<TimelineIcon className="sidebarIcon" />
Analytics
</li>
<li className="sidebarListItem">
<TrendingUpIcon className="sidebarIcon" />
Sales
</li>
</ul>
);

CSS:

.sidebarTitle {
font-size: 18px;
font-weight: 700;
color: rgb(187, 186, 186);
}
.sidebarList {
list-style: none;
padding: 5px;
}
.sidebarListItem.active,
.sidebarListItem:hover {
background-color: black;
color: white;
}

Answer 1

你的组件需要保持状态用于当前活动项。初始状态可以是0，即项目列表中第一个元素的索引。当点击另一个项目时，我们可以将点击项目的index换成setActive(index)。确定单个物品的active属性是active状态和物品的index,active == index状态的衍生物-

function App({ items = [] }) {
const [active, setActive] = React.useState(0)
return items.map((value, index) =>
<ListItem
key={index}
value={value}
active={index == active}
onClick={_ => setActive(index)}
/>
)
}
function ListItem({ value, active, onClick }) {
return <button
type="button"
class={active ? "active" : "inactive"}
onClick={onClick}
children={value}
/>
}
ReactDOM.render(<App items={["🫐", "🍑", "🥝"]}/>, document.body)

button { border-color: dodgerblue; font-size: 4rem; background-color: white; }
.active { border-color: tomato; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

Answer 2

我将把列表项存储在一个数组中，以便以后可以遍历它们

const listItems = ["Home", "Analytics", "Sales"];

我将创建一个状态来存储活动索引

const [activeIndex, setActiveIndex] = React.useState(0);

，最后我将呈现列表项如下:

<ul className="sidebarList">
{listItems.map((listItem, index) => {
return (
<li
onClick={() => setActiveIndex(index)}
className={`sidebarListItem ${
index === activeIndex ? "active" : ""
}`}
>
{listItem}
</li>
);
})}
</ul>

当用户点击项目…activeIndex将被设置为被单击的项目的项目索引。

，我正在添加className: "active"只有当item-index === activeIndex