react-bootstrap - 从文件输入获取文件对象

Question

我正在尝试通过jquery fileupload()使用react-bootstrap文件输入。使用直接jquery时，我会执行$('#fileUpload').prop('files')来将文件传递给fileupload调用。但是，我不知道如何使用react-bootstrap正确获取文件。

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

Answer 1

ref字符串属性为considered legacy，很可能在将来的某个时候不推荐使用。现在执行此操作的方法是使用回调ref。下面，我演示使用ES6箭头功能。

将输入元素更改为：

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

然后，您可以使用：

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

等等。