javascript - React js使用CSS自定义类型文件的输入

Question

我有一个需要定制的输入类型文件。我需要在输入按钮中添加一个图标，更改按钮的名称，最后隐藏所选文件的名称。我尝试了不同的方法，比如使用 <div>或 <a>但问题是我需要将所选文件传输为 json 格式。因此，通过 JavaScript 调用浏览操作会导致转换错误。我需要使用类型文件的可自定义输入

                    <input type="file"/>

我需要它看起来如何

Answer 1

您可以使用标签和隐藏输入来实现这一点。您当然需要正确设置样式并编写一个 handleFile 函数。

 <div>
     <label onChange={handleFile} htmlFor="formId">
         <input name="" type="file" id="formId" hidden />
          <Icon>
     </label>
 </div>