Я делаю приложение React с красивым компонентом перетаскивания. Я хочу установить переменную с состоянием, равную характеристике c ('id') в перетаскиваемом элементе, когда этот элемент перетаскивается в конкретный столбец.
Вот значения компонентов перетаскивания
const characteristics = [
{ id: "cia", content: 'Geopolitical' },
{ id: "randomarm", content: 'Dog Loving' },
];
const starterColumns = {
"1": {
name: 'test',
items: characteristics
},
"2": {
name: 'test2',
items: []
}
}
Вот код перетаскивания.
import React from 'react';
import '../styles/Home.css';
import { useState, useEffect } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const onDragEnd = (result, columns, setColumns, getDirections) => {
if (!result.destination) return;
const { source, destination } = result;
if (source.droppableId !== destination.droppableId) {
const sourceColumn = columns[source.droppableId];
const destColumn = columns[destination.droppableId];
const sourceItems = [...sourceColumn.items];
const destItems = [...destColumn.items];
const [removed] = sourceItems.splice(source.index, 1);
destItems.splice(destination.index, 0, removed);
setColumns({
...columns,
[source.droppableId]: {
...sourceColumn,
items: sourceItems
},
[destination.droppableId]: {
...destColumn,
items: destItems
}})
} else {
const column = columns[source.droppableId];
const copiedItems = [...column.items]
const [removed] = copiedItems.splice(source.index, 1);
copiedItems.splice(destination.index, 0, removed);
setColumns({
...columns,
[source.droppableId]: {
...column,
items: copiedItems
}
})
}
};
export default function DragNDrop (props) {
return (
<div style={{displey: 'flex', justifyContent:'center', height: '100%'}}>
<DragDropContext onDragEnd={result => onDragEnd(result, props.columns, props.setColumns)}>
{Object.entries(props.columns).map(([id, column]) => {
return (
<div stle={{display: 'flex', justifyContent: ' center', height: '100%'}}> <h2>{column.name}</h2>
<Droppable droppableId={id} key={id}>
{(provided, snapshot) => {
return (
<div
{...provided.droppableProps}
ref={provided.innerRef}
// for changing what happens when something is being dragged
style={{
background: snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
padding: 4,
width: 250,
minHeight: 500
}}
>
{column.items.map((item, index) => {
return (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => {
return (
<div ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
userSelect: 'none',
padding: 16,
margin: '0 0 8px 0',
minHeight: '50px',
backgroundColor: snapshot. isDragging ? ' #263B4A' : '#456C86',
color: 'white',
...provided.draggableProps.style
}}
>
{item.content}
</div>
)}}
</Draggable>
)})}
{provided.placeholder}
</div>
)
}}
</Droppable>
</div>
)
})}
</DragDropContext>
</div>
)
}
Спасибо за помощь!