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;

import React，{useState}来自“React”；
常量应用=（）=>{
const[active，setActive]=useState（{}）；
常数项=[
{name:'项目1'}，
{name:'项目2'}，
{名称：'项目3'}
];
handleClick=（索引）=>{
...
}
常量列表=项。映射（（项，索引）=>{
返回(
handleClick（索引）}
className={active？“active”：null}
>
{item.name}

)
})
返回{
{list}
}
}
导出默认应用程序；

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

isActive

属性

我将在

items

中为每个项目引入

active

属性，并根据单击的项目对其进行操作。需要将其添加到

useState

中，您可以使用

.map（）

更新

isActive

属性

类似如下：

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>
   </>
}

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>
   </>
}

我希望这有帮助

添加了内联注释

const App = () => {
  // active is active item, initially '' means, nothing selected.
  const [active, setActive] = useState("");

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

  const list = items.map(({ name }) => (
    <li
      key={name /* avoid using index for key */}
      onClick={() => setActive(name)}
      className={active === name ? "active" : ""}
    >
      {name}
    </li>
  ));

  // return the Element, not {}
  return (
    <>
      <ul>{list}</ul>
    </>
  );
};

export default App;

const-App=（）=>{
//active是活动项，最初为“”表示未选择任何内容。
const[active，setActive]=useState（“”）；
const items=[{name:“Item 1”}，{name:“Item 2”}，{name:“Item 3”}]；
const list=items.map（{name}）=>(
setActive（名称）}
className={active==名称？“active”：“}
>
{name}

));
//返回元素，而不是{}
返回(
{list}
);
};
导出默认应用程序；

我不想在每个item@DariusD只是用第二个选项扩展了我的答案。存储单击元素的索引，而不是在数组中引入新字段。到目前为止还不错，但如何切换它？或者同时有多个活动？例如第1项和第2项-3@DariusD在这种情况下，我会选择第一个选项，但会修改toggling

isActive

属性+1：我有一个git回购，用于点击切换项目，可能很有趣：第一个选项对我不好，但没关系，我还是会尝试其他的