使用 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([&nbsp; &nbsp;{ name: 'Item 1', isActive: true },&nbsp; &nbsp;{ name: 'Item 2', isActive: false },&nbsp; &nbsp;{ name: 'Item 3', isActive: false }]);handleClick = (index) => {&nbsp; &nbsp;setItems(prevItems =>&nbsp;&nbsp; &nbsp; &nbsp; prevItems.map((e, i) => ({...e, isActive: i === index}))&nbsp; &nbsp;);}const list = items.map( (item, index) => {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <li&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; key={index}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleClick(index)}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; className={item.isActive ? 'active' : null}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{item.name}&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; )})return {&nbsp; &nbsp;<>&nbsp; &nbsp; <ul>{list}</ul>&nbsp; &nbsp;</>}第二个选项 - 存储index单击的活动元素为单击的元素存储index有助于您识别.map()哪个是活动元素。因此，通过简单的检查，i === index您可以向元素添加active类。<li>index您可以为with创建一个状态，useState如下所示：const [index, setIndex] = useState(0);const items = [&nbsp; &nbsp;{ name: 'Item 1' },&nbsp; &nbsp;{ name: 'Item 2' },&nbsp; &nbsp;{ name: 'Item 3' }];handleClick = (i) => {&nbsp; &nbsp;setIndex(i);}const list = items.map( (item, i) => {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <li&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleClick(i)}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; className={i === index ? 'active' : null}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{item.name}&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; )})return {&nbsp; &nbsp;<>&nbsp; &nbsp; <ul>{list}</ul>&nbsp; &nbsp;</>}我希望这有帮助！

Answer 2

添加了内联评论。const App = () => {&nbsp; // active is active item, initially '' means, nothing selected.&nbsp; const [active, setActive] = useState("");&nbsp; const items = [{ name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" }];&nbsp; const list = items.map(({ name }) => (&nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; key={name /* avoid using index for key */}&nbsp; &nbsp; &nbsp; onClick={() => setActive(name)}&nbsp; &nbsp; &nbsp; className={active === name ? "active" : ""}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {name}&nbsp; &nbsp; </li>&nbsp; ));&nbsp; // return the Element, not {}&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <ul>{list}</ul>&nbsp; &nbsp; </>&nbsp; );};export default App;