【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来获取真正的内容。

很重要的一点就是记得要对每个事件都做两个操作（是不是一直都必须的那就要看情况了，例如说如果我直接拖拽进浏览器就会默认复制到浏览器并打开，但其实我并不需要这个默认功能，故关掉）

e.preventDefault()
e.stopPropagation()

好了万事俱备，将他们绑定在一起吧：addEventListener

写代码就完事了。

在获取文件内容的时候发现一件特别奇怪的事情，发现无论我的拖拽事件怎么传，都拿不到e.dataTransfer.files的数据，console.log一下发现每次的都是空的，百思不得其解。幸好在网上找到了答案。
解决方法来自一位大佬的回答，链接：link

P.S. 新手上路请多多指教～