Lamento posiblemente usar esto como un foro de ayuda, pero a pesar de los grandes esfuerzos, no puedo obtener ninguna respuesta de DropTarget en este caso de uso.
Quiero usar una serie de 'tarjetas de categoría' que pueden registrar eventos de caída en sí mismos.
¿Estoy cometiendo errores evidentes aquí?
Puedo confirmar que las funciones de DragSource están funcionando, pero nada de lo que registro de las funciones de especificaciones de DropTarget llega a la consola, es como si no se aplicaran en absoluto.
import React, { Component } from 'react'
import { DropTarget, DragSource } from 'react-dnd'
import _ from 'lodash'
export const ItemTypes = {
CATEGORY: 'category-item'
}
class CategoryTreeFork extends Component {
componentWillReceiveProps = (nextProps) => {
console.log("Next cat props", nextProps)
}
render(){
var { thisCat, childCat, level, dropEvent } = this.props
const { connectDragSource, connectDropTarget, isDragging, isOver } = this.props
return connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
)
}
}
/* get dragged */
const sourceSpec = {
beginDrag(props){
return { category_id: props.thisCat.category_id }
}
}
const sourceCollect = (connect, monitor) => {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}
}
/* get dragged onto */
const targetSpec = {
drop(props, monitor, component) {
const item = monitor.getItem()
console.log("me or my friend?", item)
},
hover(props, monitor, component){
console.log("yo what you hoverin there for homie?")
}
}
const targetCollect = (connect, monitor) => {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
}
}
export default _.flow([
DragSource(ItemTypes.CATEGORY, sourceSpec, sourceCollect),
DropTarget(ItemTypes.CATEGORY, targetSpec, targetCollect)
])(CategoryTreeFork)
DX no importa, me di cuenta justo después de que había olvidado llamar a connectDropTarget en el render. Esta es la solución:
return connectDropTarget(connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
Esto resolvió mis problemas ahora. Seguí el ejemplo "simple", ordenable e hice los decoradores dobles, pero no apliqué el connectDropTarget
para las personas que vienen de un motor de búsqueda y buscan una manera de usar DragSource y DropTarget en el mismo componente sin usar _.flow
, así es como lo hace:
export default
DragSource(typeA, specA, collectA)(
DropTarget(typeB, specB, collectB)(
Component));
Comentario más útil
para las personas que vienen de un motor de búsqueda y buscan una manera de usar DragSource y DropTarget en el mismo componente sin usar
_.flow
, así es como lo hace: