时间戳

首页 > 解决方案 > 从 React 中的最后一次单击事件中删除类

css - 从 React 中的最后一次单击事件中删除类

问题描述

我有一个带有选项卡的导航栏，我想创建一个名为 onClick 的函数来获取事件，并向该选项卡“活动”添加一个类。但是，当我单击另一个选项卡时，它应该从前一个选项卡中删除一个类并将其添加到该选项卡中。

我的代码示例：

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

function Click() {

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

标签： cssreactjs

解决方案

In React use the model (via useState() in this case) to make changes to the view.

Set the activeId of the tab in the state, and if the tab's id is equal to activeId pass set it's active to true. The tab itself can add/remove the 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>

推荐阅读