Удаление класса из события последнего нажатия в React

#css #reactjs

Вопрос:

У меня есть панель навигации с вкладками, и я хочу сделать функцию с именем onClick, которая получает событие и добавляет класс на эту вкладку «активным». Но, когда я нажимаю другую вкладку, он должен удалить класс с предыдущей вкладки и добавить его к этой.

Пример моего кода:

 const [clickedTab, setClickedTab] = useState(true);

function Click() {

  if (clickedTab === true) {
    console.log(clickedTab);
    tab.classList.add("active");
  }
  else {
    console.log("Error!");
  }
  
}

Ответ №1:

В React используйте модель ( useState() в данном случае via ) для внесения изменений в представление.

Установите activeId значение вкладки в состояние, и если значение вкладки id равно activeId pass, установите его active true равным . Сама вкладка может добавлять / удалять className .

 const { useState } = React;

const Tab = ({ id, active, setActive }) => (
  <li 
    className={`tab ${active ? 'active' : ''}`}
    onClick={() => setActive(id)}
    >
    {id}
  </li>
);

const Example = ({ tabs }) =>  {
  const [activeId, setActive] = useState(); 
  
  return (
    <ul className="tabs">
    {tabs.map(id => (
      <Tab
        key={id}
        id={id}
        setActive={setActive} 
        active={id === activeId}
      />
    ))}
    </ul>
  );
}

const tabs = [1, 2, 3, 4];

ReactDOM.render(
  <Example tabs={tabs} />,
  root
);

 .tabs {
  display: flex;
  list-style: none;
}

.tab {
  height: 1em;
  width: 2em;
  border: 1px solid red;
  text-align: center;
  cursor: pointer;
}

.active {
  background: red;
}

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

1. Это полезно, но я не знаю, как я могу объединить это с моим кодом, потому что помимо добавления className и его удаления, он также должен маршрутизировать страницы. У меня есть 4 ссылки, и вот пример одной из них: <Link style={style} to =»/»> <li>Главная</li> </Link>

2. Если вы используете react router, посмотрите на NavLink

Ответ №2:

Вот простой пример, чтобы вы могли понять идею; мы сохраняем текущий идентификатор активного элемента в a state , затем на основе этого мы решаем, какое имя класса он должен иметь; нет необходимости использовать classList ‘s add или remove

 function Header () {
  const [active, setActive] = React.useState();
  return (
    <header>
      <ul>
       <li 
         className={active === 1? "red":"blue"}
         onClick={()=>setActive(1)}
       >a</li>       
       <li 
         className={active === 2? "red":"blue"}
         onClick={()=>setActive(2)}
       >b</li>
       <li 
         className={active === 3? "red":"blue"}
         onClick={()=>setActive(3)}
       >c</li>
      </ul>
     </header>
  );
}

ReactDOM.render( <Header />, app );

 .red{background:red}.blue{background:blue}li{color:#fff;width:30px}

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

1. Могу ли я как-то сократить это и удалить повторение, но объединить его с этим примером: <Link style={style} to =»/»> <li className={active === 1? «активный»: «неактивный»} onClick={() => SetActive(1)}>Главная страница</li> </Link> ?