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

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

看到这个工作stackblitz演示。

CSS

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

FileInput组件

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'))

Answer 2

传递span元素的样式。使用正确的类名，不要将样式直接传递给className。

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