Блог

Я знаю, что для этого вопроса уже есть различные решения в 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 выбрать. итак, я подумал добавить id = 1 , id = 2, id = 3 и id = 4 во все теги li, а затем передать это значение с помощью функции и добавить m-active class только к тому тегу li, который имеет тот же идентификаторно я не знаю, как я могу настроить таргетинг только на тот 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>
  

Пожалуйста, посмотрите, можете ли вы помочь мне с этим или у вас есть другие идеи для решения этой проблемы

Вы можете отслеживать 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

Поскольку каждый <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 amp;amp; 'm-active'}`}
        onClick={() => setActive(link)}
      >{link}</a>
    </li>
  ))}
</ul>
  

Все, что делает этот код, — это сопоставляет ваш список ссылок со списком элементов, которые будут отображаться на странице, у каждого из которых есть свой onClick обработчик, устанавливающий active для состояния var соответствующее значение.

Вы можете задать дополнительные свойства для каждой ссылки, если используете объект в качестве каждого элемента links списка, а не строку; Я просто подумал, что это будет самый простой способ реализовать функциональность, которую вы ищете.

Я вижу, у вас уже есть решение. Это здорово. Я добавлю это к уже предоставленным решениям.

Поскольку вы хотите, чтобы имя класса «active» применялось к