内容简介:本文译自:文件拖放组件。例子
本文译自: 30-seconds-of-react 。 React 30 秒速学: 精选有用的 React 片段,30-seconds-of-react 的中文版本,已全部完成翻译、上线,地址: 30-seconds-of-react-zh_CN-umi 。
文件拖放组件。
-
为此组件创建一个名为
dropRef
的引用。 -
使用
React.useState()
钩子来创建drag
和filename
变量,分别初始化为false
和空字符串。变量dragCounter
和drag
用于确定是否正在拖动文件,而filename
用于存储被删除文件的名称。 -
创建
handleDrag
,handleDragIn
,handleDragOut
和handleDrop
方法来处理拖放功能,将它们绑定到组件的上下文。 -
每个方法都将处理一个特定的事件,在
React.useEffect()
钩子及其附加的cleanup()
方法中创建和删除它的监听器。 -
handleDrag
阻止浏览器打开拖动的文件,handleDragIn
和handleDragOut
处理进入和退出组件的拖动文件,而handleDrop
处理被删除的文件并将其传递给props.handleDrop
。 -
返回一个适当样式的
<div>
并使用drag
和filename
来确定其内容和样式。 -
最后,将创建的
<div>
的ref
绑定到dropRef
。
.filedrop { min-height: 120px; border: 3px solid #d3d3d3; text-align: center; font-size: 24px; padding: 32px; border-radius: 4px; } .filedrop.drag { border: 3px dashed #1e90ff; } .filedrop.ready { border: 3px solid #32cd32; } 复制代码
import React from "react"; import styles from "./FileDrop.css"; function FileDrop(props) { const [drag, setDrag] = React.useState(false); const [filename, setFilename] = React.useState(""); // 创建组件引用 let dropRef = React.createRef(); let dragCounter = 0; const handleDrag = e => { e.preventDefault(); e.stopPropagation(); }; const handleDragIn = e => { e.preventDefault(); e.stopPropagation(); dragCounter++; if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true); }; const handleDragOut = e => { e.preventDefault(); e.stopPropagation(); dragCounter--; if (dragCounter === 0) setDrag(false); }; const handleDrop = e => { e.preventDefault(); e.stopPropagation(); setDrag(false); if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { props.handleDrop(e.dataTransfer.files[0]); setFilename(e.dataTransfer.files[0].name); e.dataTransfer.clearData(); dragCounter = 0; } }; React.useEffect(() => { // 监听拖放事件 let div = dropRef.current; div.addEventListener("dragenter", handleDragIn); div.addEventListener("dragleave", handleDragOut); div.addEventListener("dragover", handleDrag); div.addEventListener("drop", handleDrop); // 销毁时移除事件 return function cleanup() { div.removeEventListener("dragenter", handleDragIn); div.removeEventListener("dragleave", handleDragOut); div.removeEventListener("dragover", handleDrag); div.removeEventListener("drop", handleDrop); }; }); return ( <div // ref 引用 ref={dropRef} className={ drag ? `${styles.filedrop} ${styles.drag}` : filename ? `${styles.filedrop} ${styles.ready}` : styles.filedrop } > {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>} </div> ); } 复制代码
例子
export default function() { return <FileDrop handleDrop={console.log} />; } 复制代码
以上所述就是小编给大家介绍的《React 30 秒速学:制作文件拖放组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Vuejs 单文件组件实例详解
- Vue组件放送之文件上传
- COS 2017.5 发布,Java文件上传组件
- Vue封装一个简单轻量的上传文件组件的示例
- 响应式文件浏览管理器angular-filemanager【组件】
- LaravelWeb v2.1.1 旗舰版发布,升级文件上传组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
网络多人游戏架构与编程
格雷泽 (Joshua Glazer)、马达夫 (Sanjay Madhav) / 王晓慧、张国鑫 / 人民邮电出版社 / 2017-10-1 / CNY 109.00
本书是一本深入探讨关于网络多人游戏编程的图书。 全书分为13章,从网络游戏的基本概念、互联网、伯克利套接字、对象序列化、对象复制、网络拓扑和游戏案例、延迟、抖动和可靠性、改进的延迟处理、可扩展性、安全性、真实世界的引擎、玩家服务、云托管专用服务器等方面深入介绍了网络多人游戏开发的知识,既全面又详尽地剖析了众多核心概念。 本书的多数示例基于C++编写,适合对C++有一定了解的读者阅读。本......一起来看看 《网络多人游戏架构与编程》 这本书的介绍吧!