В React перемещение элемента вверх при нажатии является распространенным требованием при работе со списками или пользовательскими интерфейсами, где элементы необходимо менять в зависимости от взаимодействия с пользователем. В этой статье мы рассмотрим различные методы достижения этой функциональности, приведя попутно примеры кода.

Метод 1: изменение порядка массива в состоянии
Один из подходов заключается в сохранении списка элементов в состоянии компонента в виде массива и обновлении порядка элементов при щелчке. Вот пример:

import React, { useState } from 'react';
const ItemList = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const moveItemToTop = (index) => {
    const updatedItems = [...items];
    const item = updatedItems.splice(index, 1)[0];
    updatedItems.unshift(item);
    setItems(updatedItems);
  };
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} onClick={() => moveItemToTop(index)}>
          {item}
        </li>
      ))}
    </ul>
  );
};
export default ItemList;

Метод 2: использование библиотеки (React Beautiful Dnd)
React Beautiful Dnd — это мощная библиотека, которая обеспечивает функцию перетаскивания, а также возможности изменения порядка. Вот пример использования этой библиотеки для перемещения элементов вверх по клику:

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const ItemList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  const moveItemToTop = (index) => {
    const item = items.splice(index, 1)[0];
    items.unshift(item);
  };
  const handleDragEnd = (result) => {
    if (!result.destination) return;
    const { source, destination } = result;
    const updatedItems = [...items];
    const [removed] = updatedItems.splice(source.index, 1);
    updatedItems.splice(destination.index, 0, removed);
    items = updatedItems;
  };
  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="item-list">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={index} draggableId={`item-${index}`} index={index}>
                {(provided) => (
                  <li
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    onClick={() => moveItemToTop(index)}
                  >
                    {item}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};
export default ItemList;

В этой статье мы рассмотрели два метода перемещения элемента вверх при нажатии в React. Первый метод включал переупорядочение массива в состоянии компонента, а второй метод использовал библиотеку React Beautiful Dnd для функции перетаскивания. В зависимости от сложности вашего проекта и конкретных требований вы можете выбрать метод, который наилучшим образом соответствует вашим потребностям.

Реализуя эти методы, вы можете повысить интерактивность пользователей и обеспечить плавное изменение порядка в ваших приложениях React.