javascript - 使用 useState 更改列表中的事件状态

Question

组件

这是一个代码示例。我想要的是当我单击每个单独的列表项时切换其事件状态(真/假)。我不想一次性全部更改。

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

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;

Answer 1

第一个选项 - 介绍 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创建一个状态与 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>
   </>
}

希望这会有所帮助!