react-file-input 是一个方便且易用的 React 组件，允许用户上传文件。本文将详细介绍如何使用这个 npm 包，包括安装、文档、代码示例和注意事项等方面。
安装 npm 包
在确保项目已经使用了 npm 或者 yarn 来管理依赖后，可以使用下面的命令来安装 react-file-input:
npm install react-file-input
或者
yarn add react-file-input
组件文档
react-file-input 的文档非常简单，只有一个必须要传入的属性 onChange，用于处理用户点击“选择文件”按钮后的回调函数。其他属性都是可选的。下面是属性的介绍：
onChange: Function：上传文件的回调函数；disabled: boolean：禁用状态；accept: string：上传文件的类型；defaultFileName: string：用于显示文件名的文本；placeholder: string：显示在选择按钮上的占位符；style: object：添加样式。
下面是一个简单的用法示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- -------------------
-------- ----- -
----- ---------- ------------ - -------------
----- ------------ - ------- -- -
--------------------------------------------------
--
------ -
-----
---------- -----------
----------
-----------------------
--------------------------
------------------
------------------------
--
------
--
-
------ ------- ----在以上代码中，我们先用 useState() 来定义一个状态 fileName，并把它作为 defaultFileName 的参数传入到 FileInput 组件中。这个组件渲染后，fileName 会被初始化为空，但是当用户选择了一个文件后，fileName 会被更新为该文件的名称，这个名称会显示在文件选择框的输入框中。
注意事项
- 如果要处理多个文件上传，可以使用
react-multiple-file-input组件； - 后端需要自行处理上传的文件；
- 推荐使用样式库覆盖组件的样式，以保证视觉效果；
- 组件的所有属性都是可选的，但是如果没有传入
onChange属性，组件就没有上传文件的作用了；
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-file-input