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

Question

我有一个需要自定义的类型文件的输入。我需要在输入按钮中添加一个图标，更改按钮的名称，最后隐藏所选文件的名称。我尝试了不同的方法，例如使用<div>or <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>

Answer 2

使用 HTMLlabel标签和htmlFor属性是最好的解决方案。

步骤1： 创建一个通用组件，为您提供文件输入的功能。

// UploadControl.js

const UploadControl = ({ children, value, onChange, disabled, accept }) => {
  return (
    <label htmlFor="contained-button-file" className="m-0 w-100">
      <input
        value={value}
        accept={accept}
        disabled={disabled}
        style={{ display: 'none' }}
        id="contained-button-file"
        multiple
        type="file"
        onChange={disabled ? () => {} : onChange}
      />
      {children}
    </label>
  );
};

第 2 步：通过包装自定义样式的 UI 来使用此组件。

<button className="btn-styles">
   <UploadControl onChange={handleAddBanner} accept="image/*">
     Add New Banner
   </UploadControl>
</button>

第 3 步：实现一个处理程序来获取您的文件。

const handleAddBanner = ({ target: { files } }) => {
  const loadedImage = files[0];
  // loadedImage will be a image file.
};