是否可以使用 <input type="file"/> 制作 AG Grid 自定义单元格编辑器答案

【问题标题】：is it possible to make AG Grid custom cell editor with <input type="file"/>是否可以使用 <input type="file"/> 制作 AG Grid 自定义单元格编辑器
【发布时间】：2019-09-01 15:46:10
【问题描述】：

我有一些任务要为 ReactJS AG Grid 制作自定义单元格编辑器。 link

是否可以使用 html 文件输入制作自定义单元格编辑器？

<input type="file">

因此用户可以选择图片等文件并将其显示在网格中

【问题讨论】：

标签： reactjs ag-grid html-input ag-grid-react

【解决方案1】：

是的，可以在单元格中使用自定义组件，配置如下：

           <AggGrid
                .....
                onRowDragEnd={this.handleRowDrag}
                frameworkComponents={{
                    fileRenderer: FileUploadComponent
                }}/>

header 定义如

[
 ...,
 {headerName: 'Attachment', field: 'file',minWidth: 100, cellRenderer: 
 'fileRenderer'},
...
]

这在您的名为Attachment 的列中，带有字段文件，它将在您提供FileUploadComponent 的位置呈现fileRender。

参考Docs for FrameworkComponents

【讨论】：

您可以像往常一样使用该组件的 onChange 方法并在 this.props 上查找其他行详细信息
我需要 REST API 来上传文件吗？
这取决于您的应用程序需要是将文件上传到服务器/文件存储还是仅显示在屏幕上。但是你想做的任何事情都可以在那个组件那里完成
好的，最后一个问题。如果我只想将图像文件存储在客户端我应该在哪里存储？反应状态？
你可以将base64或文件路径存储在状态并渲染图像