React-dnd 元素样式不会在拖动时更新
React-dnd element style is not updated on drag move
我已调整 react-dnd sortable example 以在我的应用程序内部使用。
我无法让 "opacity" 跟随我的拖动。
当我最初选择元素时应用不透明度:
但是当我向上移动它来改变位置时,不透明度仍然应用于原始 DOM 元素(?)。
状态相应更改,与此状态关联的 table 中的列正在重新排序。所以除了不透明度之外,其他一切都工作正常。
当我四处移动元素时,只有 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
值有问题。
我曾经将 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} />)
一切都开始奏效了。
目前 column
值是唯一的并且与单个条目关联 - 稍后最好将 id
字段添加到状态。
我已调整 react-dnd sortable example 以在我的应用程序内部使用。
我无法让 "opacity" 跟随我的拖动。
当我最初选择元素时应用不透明度:
但是当我向上移动它来改变位置时,不透明度仍然应用于原始 DOM 元素(?)。
状态相应更改,与此状态关联的 table 中的列正在重新排序。所以除了不透明度之外,其他一切都工作正常。
当我四处移动元素时,只有 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
值有问题。
我曾经将 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} />)
一切都开始奏效了。
目前 column
值是唯一的并且与单个条目关联 - 稍后最好将 id
字段添加到状态。