首頁猿問使用 useState...

使用 useState 更改列表中的活動狀態

JavaScript

喵喔喔 2022-05-26 16:27:44

零件這是一個代碼示例。我想要的是當我單擊它時為每個單獨的列表項切換活動狀態（真/假）。我不想一次全部更改。有什么幫助嗎？提前致謝。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;

查看完整描述

2 回答

慕雪6442864

TA貢獻1812條經驗獲得超5個贊

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 {

</>

}

第二個選項 - 存儲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 {

</>

}

我希望這有幫助！

反對回復 2022-05-26

UYOU

TA貢獻1878條經驗獲得超4個贊

添加了內聯評論。

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 (

</>

);

};

export default App;

反對回復 2022-05-26

2 回答
0 關注
280 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 useState 更改列表中的活動狀態

使用 useState 更改列表中的活動狀態

2 回答

添加回答