我已经改编了react-dnd sortable example在我的应用程序内部使用。
我无法使“不透明度”跟随我的拖动。
当我最初选择元素时,应用了不透明度:
但是当我向上移动它来更改位置时,不透明度仍然应用于原始 DOM 元素(?)。
状态会相应更改,与此状态关联的表中的列将被重新排序。因此,除了不透明度之外,其他一切都工作正常。
当我移动元素时,只有 li 的值发生变化,但 data-reactid
的位置没有改变。
我的应用程序中唯一的区别是我管理状态的方式。在我的应用程序中,状态是通过 redux 进行管理的。
传入 DropTarget 的 hover
函数基本上是从示例中复制和粘贴的。
SortableColumnEntry 组件:
class SortableColumnEntry extends Component {
render(){
const { connectDragSource, connectDropTarget } = this.props
const { column, isDragging, index } = this.props
const opacity = isDragging ? 0 : 1
const element = connectDropTarget(connectDragSource(
<li
style={{opacity: opacity}}</li>
))
return element
}
}
export default flow(
DragSource(DragTypes.COLUMN, source, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
})),
DropTarget(DragTypes.COLUMN, target, (connect) => ({
connectDropTarget: connect.dropTarget()
}))
)(SortableColumnEntry)
最佳答案
好吧,我终于整理好了。
我从父组件传入的key
值存在问题。
我曾经将键
基于随元素变化的索引。
我以前就是这么做的:
const columnTags = columns.map(
(column, index) =>
<SortableColumnEntry
key={index}
index={index}
column={column} />)
当我更改它以保持唯一性并与状态相关联时:
const columnTags = columns.map(
(column, index) =>
<SortableColumnEntry
key={column}
index={index}
column={column} />)
一切都开始起作用了。
目前列
值是唯一的并且与单个条目相关联 - 稍后最好将id
字段添加到状态。
关于drag-and-drop - React-dnd 元素样式在拖动移动时不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33725333/