时间戳

首页 > 解决方案 > 使用 useState 更改列表中的活动状态

javascript - 使用 useState 更改列表中的活动状态

问题描述

零件

这是一个代码示例。我想要的是当我单击它时为每个单独的列表项切换活动状态（真/假）。我不想一次全部更改。

有什么帮助吗？提前致谢。

import React, { useState } from "react";

const App = () => {
  const [active, setActive] = useState({});

  const items = [
   { name: 'Item 1' },
   { name: 'Item 2' },
   { name: 'Item 3' }
  ];

  handleClick = (index) => {
    ...
  }

  const list = items.map( (item, index) => {
    return(
      <li 
        key={index} 
        onClick={() => handleClick(index)} 
        className={active ? "active" : null}
     >
        {item.name}
     </li>
    )
  })

  return {
   <>
    <ul>{list}</ul>
   </>
  }
}

export default App;

标签： javascriptarraysreactjs

解决方案

isActive第一个选项 -为每个元素引入属性

我将在每个项目items的active属性中引入并根据单击的项目来操作它们。需要将其添加到useState您可以使用 更新isActive属性的位置.map()。

类似如下：

const [items, setItems] = useState([
   { name: 'Item 1', isActive: true },
   { name: 'Item 2', isActive: false },
   { name: 'Item 3', isActive: false }
]);

handleClick = (index) => {
   setItems(prevItems => 
      prevItems.map((e, i) => ({...e, isActive: i === index}))
   );
}

const list = items.map( (item, index) => {
    return(
      <li 
        key={index} 
        onClick={() => handleClick(index)} 
        className={item.isActive ? 'active' : null}
      >
         {item.name}
      </li>
    )
})

return {
   <>
    <ul>{list}</ul>
   </>
}

第二个选项 - 存储index单击的活动元素

为单击的元素存储index有助于您识别.map()哪个是活动元素。因此，通过简单的检查，i === index您可以向元素添加active类。<li>

index您可以为with创建一个状态，useState如下所示：

const [index, setIndex] = useState(0);

const items = [
   { name: 'Item 1' },
   { name: 'Item 2' },
   { name: 'Item 3' }
];

handleClick = (i) => {
   setIndex(i);
}

const list = items.map( (item, i) => {
    return(
      <li 
        key={i} 
        onClick={() => handleClick(i)} 
        className={i === index ? 'active' : null}
      >
         {item.name}
      </li>
    )
})

return {
   <>
    <ul>{list}</ul>
   </>
}

我希望这有帮助！

推荐阅读