React JS中的列表移动

Question

所以我想要的就是

我在List组件中传递一个数组，像这样:

& lt;列表项={("A","B","C"]}/祝辞

现在我需要打印list中的每个元素，像这样:

●●B●C

但是当有人点击列表元素时，该元素应该出现在第一位。例如:如果我点击B，那么输出应该是这样的:

●B●一个●C

有任何解决方案，请帮助。

Answer 1

你可以这样做

const List = ({items}) => {
const [list, setList] = useState(items)

return <ul>{list.map((l, i) => 
<li  
onClick={() => setList([l, ...items.filter(item => item !== l)])} 
key={i}>
{l}
</li>)}
</ul>
}

Answer 2

1. 创建一个想要移动的值的副本

2. 创建一个没有filter值的数组副本。如果有索引，则为splice。

3. 使用unshift

   将值添加到Array副本中

4. 设置你的状态为Array copy

医生:https://love2dev.com/blog/javascript-remove-from-array/https://www.w3schools.com/jsref/jsref_unshift.asp: ~:文本= % 20平移()% 20方法% 20补充道,原来方法% 20覆盖% 20 % 20 % 20数组。

Answer 3

const Home = () => {
const [myList, setMyList] = useState(["A","B","C"]);

function shiftPlace(from, to) {
const arr = myList;
let cutOut = arr.splice(from, 1)[0];
arr.splice(to, 0, cutOut);
setMyList([...arr]);
}
return (<div>
{
myList.map((v, i) => {
return <span key={i} onClick={() => {
shiftPlace(i, 0);
}}>{v}</span>;
})
}
</div>);
};

这是你需要的一切。