Maaf mungkin menggunakan ini sebagai lebih dari forum bantuan, tetapi terlepas dari upaya keras saya tidak dapat memperoleh tanggapan apa pun dari DropTarget dalam kasus penggunaan ini.
Saya ingin menggunakan serangkaian 'kartu kategori' yang dapat mendaftarkan acara drop ke diri mereka sendiri.
Apakah saya membuat kesalahan mencolok di sini?
Saya dapat mengonfirmasi bahwa fungsi DragSource berfungsi, tetapi tidak ada yang saya log dari fungsi spesifikasi DropTarget yang membuatnya ke konsol, sepertinya mereka sama sekali tidak diterapkan.
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 Nevermind, baru sadar setelah itu saya lupa memanggil connectDropTarget di render. Ini adalah perbaikannya:
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>
Ini memecahkan masalah saya sekarang. Mengikuti contoh "sederhana", yang dapat diurutkan dan melakukan dekorator ganda, tetapi tidak menerapkan connectDropTarget
untuk orang-orang yang berasal dari mesin telusur, mencari cara untuk menggunakan DragSource dan DropTarget pada komponen yang sama tanpa menggunakan _.flow
, begini caranya:
export default
DragSource(typeA, specA, collectA)(
DropTarget(typeB, specB, collectB)(
Component));
Komentar yang paling membantu
untuk orang-orang yang berasal dari mesin telusur, mencari cara untuk menggunakan DragSource dan DropTarget pada komponen yang sama tanpa menggunakan
_.flow
, begini caranya: