React dnd实现拖拽的时候，在目标框中如何添加移动的内容？

Question

问题描述

在使用React dnd实现拖拽的时候，在目标框中如何添加移动的内容？

相关代码

Container.js

<Source name={item.name} key={item.id} id={item.id} index={index} icon={item.icon} />

Source.js

return (
  connectDragSource(
    <div className="app-source" style={style}>
      {name}
      <i className={'iconfont ' + icon}></i>
    </div>
  )
  

Target.js

return connectDropTarget(
        // style={style}
        <div className="app-target">
            {isActive ?
                'Hummmm, source!' : 
                'Drag here to order!'
            }
        </div>
    )

图

后话

看了两天的React dnd的文档也百度了，还是不知道要怎么在目标框中添加移动的内容，各位大神，谁知道的，指点下，谢谢了~

Answer 1

你要转变一下思路。
右侧添加的内容应该是state中的数据，而不是左侧的内容。
也就是说，被拖的对象（左侧）和拖放的目标（右侧）是两个不同的state数据。
那么可以假设，左侧对象为state.origin = [], 右侧对象为:state.dest = [].
当你从左侧拖到右侧时，在state.dest中添加一个state.origin的对象就可以了。