在 onChange vs onClick 中引用文件?

Question

>我有一个反应应用程序，它可以打开文件选择器并在选择文件(onChange(时调用方法(handleFileChosen(。我希望在单击按钮(onClick(时调用该方法(handleFileChosen(，而不是在最初选择文件时调用。

目前我的代码如下所示：

渲染(( {

let fileReader;
const handleFileRead = (e) => {
// do stuff
};
const handleFileChosen = (file) => {
fileReader = new FileReader()
fileReader.onloadend = handleFileRead
fileReader.readAsText(file)
};
if(this.state.loading === true) return <div>...exporting file</div>;
return (
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" onChange={e => handleFileChosen(e.target.files[0])}></input>
<label class="custom-file-label" htmlFor="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" onClick={e => handleFileChosen(e.target.files[0])}>Register</button>
</div>
</div>

我的问题是，handleFileChosen方法调用在由onChange事件触发时工作正常，但是当由按钮上的onClick事件触发时，它会导致TypeError: Cannot read property '0' of undefined错误。

如何解决此问题，以便 onClick 事件成功调用handleFileChosen？

Answer 1

输入和按钮元素之间没有连接。您必须等到文件加载完毕才能以本地状态存储。然后，您可以在单击回调的按钮中使用它。

Answer 2

实际上这是不可能的，因为处理程序期望一个包含文件数组的对象，而这只能通过使用类型为文件的特定输入来实现。虽然，您可以将此输入转换为您想要的形状 通过 css