将活动类添加到react中的li项

Question

我知道SO上已经有各种各样的解决方案了。但我无法让它发挥作用。

const [isActive, setActive] = useState(false);
const toggleClass = () => {
setActive(!isActive);
};

<ul>
<li>className="nav-item "><a href="#!" 
className={isActive ? 'm-active nav-link': "nav-link"} 
onClick={toggleClass} 
data-toggle="tab"
id=1>POSTS</a>
</li>
<li>........className={isActive ? 'm-active nav-link': "nav-link"} 
onClick={toggleClass}.............................</li>
<li>........className={isActive ? 'm-active nav-link': "nav-link"} 
onClick={toggleClass}.............................</li>
<li>........className={isActive ? 'm-active nav-link': "nav-link"} 
onClick={toggleClass}.............................</li>
</ul>

因此，现在当我单击任何li项时，它会选择其他li项并将其添加到m-active className中你可以在这里看到它的样子。在这里输入图像描述

发生这种情况是因为它不知道该选择哪个li。所以，我想在所有li标签中添加id=1、id=2、id=3和id=4，然后用函数传递该值，只将m-active类添加到具有相同id的li标签中，但我不知道如何只针对函数传递的具有相同id的li

const toggleClass = (id) => {
setActive(!isActive);
};
<li>className="nav-item "><a href="#!" 
className={isActive ? 'm-active nav-link': "nav-link"} 
onClick={() => toggleClass(1)} 
data-toggle="tab"
id=1>POSTS</a>

请看看你是否可以帮助我，或者你是否有其他想法来解决这个问题

Answer 1

您可以跟踪active Li id，并在此基础上添加活动类。

import React, { useState } from "react";
import "./styles.css";
export default function App() {
const values = [
{ id: 1, text: "LI-1" },
{ id: 2, text: "LI-2" },
{ id: 3, text: "LI-3" },
{ id: 4, text: "LI-4" }
];
const [activeId, setActiveId] = useState();
return (
<div className="App">
<ul>
{values.map((val) => (
<li onClick={() => setActiveId(val.id)}>
{val.text} -- {activeId === val.id ? "Active" : "Inactive"}
</li>
))}
</ul>
</div>
);
}

工作演示-https://codesandbox.io/s/naughty-sinoussi-bmy4p?file=/src/App.js:0-543

Answer 2

由于每个<li />元素似乎都很相似，您可能需要考虑使用.map来填充<ul />，以简化这里的过程。类似以下内容：

const links = ['link1', 'link2', 'link3'];
const [active, setActive] = useState(null);
<ul>
{links.map((link) => (
<li className="nav-item">
<a 
href={`#${link}`} 
className={`nav-link ${active == link && 'm-active'}`}
onClick={() => setActive(link)}
>{link}</a>
</li>
))}
</ul>

所有这些代码所做的就是将链接列表映射到将在页面上呈现的元素列表，每个元素都有其onClick处理程序，将active状态变量设置为相应的值。

如果使用对象而不是字符串作为links列表的每个元素，则可以设置关于每个链接的更多属性；我只是觉得这将是实现您想要的功能的最简单的方法。

Answer 3

我看到您已经有了一个解决方案。太好了。我将把这一点添加到已经提供的解决方案中。

如果您想要className"活动的"；要应用于单击的

元素，您可能希望默认情况下第一个项目已被选中或标记为"；"活动"；。

您只需将初始状态设置为1:即可完成此操作

const [active, setActive] = React.useState(1);