【React】简单拖拽功能

初次接触React框架，网上教程很多，当然这个框架也很好用的，上手也不算难，这里不累述。

前两天新手上路要实现一个拖拽功能，先去这位大佬的网页里做了参考，链接：link

对各类拖拽事件有了一定的了解之后就可以上手写自己的代码了。

思路大概就是分析需要哪些事件，这里需要的是
dragenter：进入拖拽区域，这里拖拽区域用一个div包裹起来就可以了。
dragleave：离开拖拽区域
dragover：在拖拽区域这块地方游走
drop：放下，顾名思义就是将文件放入拖拽区域
当我们在做拖拽工作的时候这几个事件会出现，e.dataTransfer会有对应的数据信息。

这时候就要确定我们在每个事件发生的时候都要干些什么了。于是处理函数就要开始设计了：

handleDragEnter(e)：进入的时候我们要看一下是不是有东西了，就要根据 e.dataTransfer.item来判断有东西要drag进来，完了要把状态变一下。
handleDragLeave(e)：离开拖拽区域，就把对应的状态变一下，这样我们就可以更改提示语啦。
handleDragOver(e)：这个方法用来处理悬浮在拖拽区域上方的，为什么明明不需要改状态之类的还要这个函数呢？其实它还是很重要的，根据大佬的说法，要阻止一下默认行为和事件冒泡。
handleDrop(e)：重头戏来啦，投放文件之后我们就要负责把文件上传啦。上传操作就涉及到我们把从e.dataTransfer.files中取到的数据传上服务器了。注意了我们上面用item来判断内容，用files来获取真正的内容。