如何在React.js中重置文件输入
在本文中,我们将看到如何在React中重置文件。要在React中重置文件输入,我们可以使用useRef创建对输入元素的引用,并使用DOM API修改其属性。
useRef是React Hook,它可以持久地存储可变值而不触发重新渲染。它可以保存对DOM节点、计数器或定时器的引用。
内置的React hook useRef(initialValue)接受一个参数作为初始值,并返回一个引用(也称为ref)。拥有唯一属性current的对象称为引用。
语法:
创建React应用的步骤:
步骤1: 使用以下命令创建一个React应用
步骤2: 创建完您的项目文件夹后,即 file-input,使用以下命令进入该文件夹:
项目结构: 它将如下所示:
步骤3: 打开 App.js 文件。只需将源代码粘贴到 App.js 文件中。
示例: 在这个示例中,React 组件 “App” 导出一个文件输入字段和一个重置按钮。该组件的容器样式设置了 5rem 的边距,并将子元素水平居中在一个 flexbox 列布局中。为了生成对输入元素的引用,开发者使用了 useRef 钩子。他们通过定义一个常量 “inputFile”,将 useRef 钩子调用的初始值设置为 null 来实现这一点。
handleReset 函数是一种类型的回调函数,它在单击重置按钮时重置输入元素的值。该函数通过验证 inputFile 引用是否存在,然后将输入元素的值修改为空字符串来实现这一功能。此外,它还在 “text” 和 “file” 之间切换输入元素的类型。
步骤4: 要运行应用程序,请打开终端并输入下面所列的命令。然后访问 **** http://localhost:3000/ 以查看输出结果。
输出: