使用 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您可以为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>

   </>

}

我希望这有帮助！

Answer 2

添加了内联评论。

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;