React - 文件上传器

Question

所以我一直在用这个https://github.com/FineUploader/react-fine-uploader。有没有办法将 cursor: pointer 添加到 FileInput 元素的样式。

我试过的是：

     <FileInput
        uploader={this.uploader}
        className={{ cursor: 'pointer' }}
        style={{ cursor: 'pointer' }}
      >
        <span>{this.props.children}</span>
      </FileInput>

然后生成：

<input type="file" class="react-fine-uploader-file-input" style="bottom: 0px; height: 100%; left: 0px; margin: 0px; opacity: 0; padding: 0px; position: absolute; right: 0px; top: 0px; width: 100%;">

没有 cursor: pointer 属性

Answer 1

为您的 span 元素传递样式。使用正确的 class 名称，不要将样式直接传递到 className.

     <FileInput uploader={this.uploader} >
        <span style={{cursor : 'pointer'}}>{this.props.children}</span>
     </FileInput>

Answer 2

您可以使用 CSS 来实现。您需要创建一个 css 并需要提供文件输入 className="file-upload"。

查看此工作 stackblitz 演示。

CSS

.file-upload input[type='file'],::-webkit-file-upload-button {
  cursor: pointer;
}

文件输入组件

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

import FileInput from 'react-fine-uploader/file-input'
import FineUploaderTraditional from 'fine-uploader-wrappers'

const uploader = new FineUploaderTraditional({
  options: {
    request: {
      endpoint: 'my/upload/endpoint'
    }
  }
})

const fileInput = (
  <FileInput multiple accept='image/*' uploader={uploader} className="file-upload">
    <span class="fa fa-upload file-label">Choose Files</span>
  </FileInput>
)

render(fileInput,document.getElementById('root'))

React - 文件上传器

React - File Uploader

javascript

fine-uploader

reactjs