[英]moving components up and down
import React, { useState } from "react";
function arraymove(arr, fromIndex, toIndex) {
const arrCopy = [...arr];
var element = arrCopy[fromIndex];
arrCopy.splice(fromIndex, 1);
arrCopy.splice(toIndex, 0, element);
return arrCopy;
}
export default function App() {
const [components, setComponents] = useState([]);
function MoveUp(index) {
if (index === 0) return;
const updatedArray = arraymove(components, index, index - 1);
setComponents(updatedArray);
}
function MoveDown(index) {
if (index === components.length - 1) return;
const updatedArray = arraymove(components, index, index + 1);
setComponents(updatedArray);
}
const MovableComponent = (props) => (
<>
<div>{props.id}</div>
<button onClick={() => MoveUp(props.index)}> Move Up </button>
<button onClick={() => MoveDown(props.index)}> Move Down </button>
<br />
<br />
</>
);
return (
<div className="App">
{components.map(({ id }, index) => (
<MovableComponent key={index} id={id} index={index} />
))}
<button
onClick={() => {
setComponents((prev) => [
...prev,
{ id: `component #${components.length}` }
]);
}}
>
Add
</button>
</div>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.