从文件输入中获取文件对象

Question

我正在尝试使用带有jquery的react-bootstrap文件输入fileupload().使用直接jquery,我会将$('#fileUpload').prop('files')文件传递给fileupload调用.但是,我不知道如何使用react-bootstrap正确获取文件.

<Input type='file' label='Upload' accept='.txt' ref='fileUpload' buttonAfter={uploadFileButton}/>

Answer 1

ref string属性被认为是遗留属性,并且很可能在将来的某个时候被弃用.现在这样做的方法是使用回调参考.下面我演示使用ES6箭头功能.

将您的输入元素更改为:

<Input 
  type='file' label='Upload' accept='.txt' 
  buttonAfter={uploadFileButton} 
  ref={(ref) => this.fileUpload = ref}
/>

然后你可以使用:

const file = this.fileUpload.files[0];

等等.

Answer 2

更当前的版本将是这样的：

function MyComponent(): JSX.Element {
  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const files = Array.from(e.target.files)
    console.log("files:", files)
  }

  return (
    <input onChange={handleFileSelected} type="file" />
  )
}

可以找到e.target.files可以从onChange事件中获取的属性。

编辑：删除了不必要的引用代码，在评论中标记了帽子提示

Answer 3

这很直接; 我完全错过了这个:

var files = this.refs.fileUpload.getInputDOMNode().files;

Answer 4

我通过React-Bootstrap自定义按钮解决了这样的文件上传:

addFile = (event: any): void => {
    console.log(event.target.files[0]);
}

<FormGroup>
    <ControlLabel htmlFor="fileUpload" style={{ cursor: "pointer" }}><h3><Label bsStyle="success">Add file</Label></h3>
        <FormControl
            id="fileUpload"
            type="file"
            accept=".pdf"
            onChange={this.addFile}
            style={{ display: "none" }}
        />
    </ControlLabel>
</FormGroup>