Array Re arrange in React js

Question

我有一些数组对象。

基于列表的，如果用户单击对象中的特定列表项，

需要显示特定的点击列表项作为第一。

var list = [
{
tradeareaid: "80"
tradeareaname: "test1"
},
{ 
tradeareaid: "81"
tradeareaname: "test2"
},
{ 
tradeareaid: "82"
tradeareaname: "test3"
},
{ 
tradeareaid: "83"
tradeareaname: "test4"
},
{ 
tradeareaid: "84"
tradeareaname: "test5"
},
]

在列表中如果我选择贸易区域83意味着我需要下面的列表

var list = [
{ 
tradeareaid: "83"
tradeareaname: "test4"
},
{
tradeareaid: "80"
tradeareaname: "test1"
},
{ 
tradeareaid: "81"
tradeareaname: "test2"
},
{ 
tradeareaid: "82"
tradeareaname: "test3"
},
{ 
tradeareaid: "84"
tradeareaname: "test5"
},
]

如何实现这一点?

Answer 1

您可以获得被单击的项目的tradeareaid，并使用getSortedList函数(在单击事件处理程序中)获得像这样的新列表:

var list = [
{
tradeareaid: "80",
tradeareaname: "test1"
},
{ 
tradeareaid: "81",
tradeareaname: "test2"
},
{ 
tradeareaid: "82",
tradeareaname: "test3"
},
{ 
tradeareaid: "83",
tradeareaname: "test4"
},
{ 
tradeareaid: "84",
tradeareaname: "test5"
},
]
function getSortedList(id){
const clickedItem = list.find(item=>item.tradeareaid===id)
const filterdList = list.filter(item=>item.tradeareaid!==id)
return [clickedItem,...filterdList]
}
const sortedList = getSortedList(list[3].tradeareaid)
console.log({sortedList})

Answer 2

您需要为sort onclick设置一些键

var list = [ { tradeareaid: "80", tradeareaname: "test1" }, { tradeareaid: "81", tradeareaname: "test2" }, { tradeareaid: "82", tradeareaname: "test3" }, { tradeareaid: "83", tradeareaname: "test4" }, { tradeareaid: "84", tradeareaname: "test5" }, ]
//if test4 was clicked 
clicked = 3; // index
list.forEach((a, b) => {
list[b]['key'] = b;
if (b == clicked) {
list[b]['key'] = -1;
}
})
console.log(list.sort((a, b) => a.key - b.key))