如何让React Admin中所有ImageInput与FileInput共用一个确认对话框？

当然可以让所有ImageInput和FileInput共用同一个确认对话框，只需要把文件删除的验证逻辑抽成通用函数，让所有组件复用即可。以下是修改后的代码：

import * as React from "react";
import {
  Create,
  SimpleForm,
  ImageInput,
  ImageField,
  FileInput,
  FileField,
  Confirm,
} from 'react-admin';

export const PostCreate = props => {
  const [removeData, setRemoveData] = React.useState(null);
  const [openModal, setOpenModal] = React.useState(false);

  // 通用的文件删除验证函数
  const handleFileRemoval = (file, fileType) => {
    return new Promise((resolve, reject) => {
      setRemoveData({
        fileName: `${fileType}: ${file.title}`,
        confirmDelete: () => resolve(true),
        cancelDelete: () => reject(new Error("删除已取消"))
      });
      setOpenModal(true);
    });
  };

  return (
    <Create {...props}>
      <SimpleForm>
        <ImageInput 
          source="pictures" 
          label="Related pictures"
          validateFileRemoval={(file) => handleFileRemoval(file, "图片")}
        >
          <ImageField source="src" title="title" />
        </ImageInput>
        <FileInput 
          source="attachments_pdf" 
          accept=".pdf"
          validateFileRemoval={(file) => handleFileRemoval(file, "PDF文件")}
        >
          <FileField source="src" title="title" />
        </FileInput>
        <FileInput 
          source="attachments_csv" 
          accept=".csv"
          validateFileRemoval={(file) => handleFileRemoval(file, "CSV文件")}
        >
          <FileField source="src" title="title" />
        </FileInput>

        <Confirm
          isOpen={openModal}
          title="删除文件"
          content={`${removeData?.fileName || ''} 将被删除，确定要继续吗？`}
          onConfirm={() => {
            setOpenModal(false);
            removeData?.confirmDelete();
          }}
          onClose={() => {
            setOpenModal(false);
            removeData?.cancelDelete();
          }}
        />
      </SimpleForm>
    </Create>
  )
};

关键改动说明： #

• 抽离了handleFileRemoval通用函数，接收文件和文件类型参数，统一处理删除前的确认逻辑，避免重复代码。
• 给每个FileInput都添加了validateFileRemoval属性，传入对应的文件类型，确保确认对话框显示正确的文件信息。
• 将状态变量removeImage改名为removeData，更贴合通用场景，不再局限于图片。
• 调整了Confirm组件的标题和内容，使其适配所有文件类型的删除确认。

内容的提问来源于stack exchange，提问作者DevNooby