Material-UI DropZone "getFileAddedMessage" 处理程序在单个字符串中返回多个文件名

Question

我正在使用 Material UI dropzone。 https://yuvaleros.github.io/material-ui-dropzone/。我可以一次删除多个文件。但是该组件在小吃店警报中返回所有文件名组合在一个字符串中。我想在上传多个文件时为每个文件设置单独的小吃店提醒。

任何建议或想法都会有所帮助。

Answer 1

不幸的是，Material UI Dropzone 库不允许您访问多个小吃店警报，但您可以使用 onDrop 属性和自定义的 snackbar 库（您可以使用 material 示例中的那个 - 在 snackbars 页面的底部有一个使用 notistack 库的示例：https://material-ui.com/components/snackbars/）。

一些注意事项：

您需要删除 getFileAddedMessage 方法（您不会使用它）。
您需要将 showAlerts 设置为 false（因为您手动管理警报并且未使用 Material UI Dropzone 库。

这里是 DropzoneArea 的例子：

<DropzoneArea
    acceptedFiles={["image/*", "video/*", "application/*"]}
    onChange={this.handleChange.bind(this)}
    showFileNames
    filesLimit={20}
    showAlerts={false}
    onDrop={e => {
      e.forEach(item => this.props.enqueueSnackbar(item.name));
    }}
/>

您可以在此处查看工作示例：https://codesandbox.io/s/mui-material-dropzone-multiple-snackbars-54rij?file=/src/index.js

Answer 2

您需要使用 alertSnackbarProps 道具

像这样：

Material-UI DropZone "getFileAddedMessage" 处理程序在单个字符串中返回多个文件名

Material-UI DropZone "getFileAddedMessage" handler returning multiple file names in a single string

javascript

reactjs

material-ui

dropzone

react-dropzone