使用功能React组件创建带有提交按钮的文件上传

Question

对任何误解表示歉意，因为我是React的新手。需要注意的是，我使用的是带有严格空检查的Typescript。我正在尝试创建一个带有提交按钮的文件上传功能组件，因此您可以选择文件->查看文件名并提交按钮->单击提交以实际上传。我尝试过使用State Hook，但无法使用内置的State Hook来处理可以从e.target.files[0]获得的File对象。这是我的：

return(
<Row>
<Col>
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text" onClick={(e) => fileSelected && handleUploadClick(e)}>
Upload
</span>
</div>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
ref={fileInput}
onClick={handleFileSelect}
/>
<label className="custom-file-label">
{(fileSelected && selectedFilename) || "Select a file to upload"}
</label>
</div>
</div>
</Col>
</Row>
);

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
let imageFile = null; const handleFileSelect = (e)=> { imageFile = e.target.files[0] console.log(imageFile) }
<input type="file" className="custom-file-input" onClick={(e)=>handleFileSelect(e)} />