如何实现点击DeleteIconSmall从已保存文档汇总面板移除文档名称

要实现点击DeleteIconSmall移除对应文档的功能，核心是通过状态提升让父组件管理文档列表状态，子组件触发删除动作，具体步骤如下：

1. 父组件管理文档列表状态并实现删除逻辑 #

在包含汇总面板的父组件中，维护已保存文档的数组状态，并编写删除方法，通过props传递给子组件：

import { useState } from 'react';
import SavedDocument from './SavedDocument';

const DocumentUploader = () => {
  // 存储已保存的文档列表
  const [savedDocuments, setSavedDocuments] = useState<DocumentUploaderFile[]>([]);

  // 删除指定文档：过滤掉目标文档，更新状态
  const handleDelete = (targetDoc: DocumentUploaderFile) => {
    // 注意：必须用文档的唯一标识（如id）过滤，避免名称重复导致误删
    setSavedDocuments(prevDocs => prevDocs.filter(doc => doc.id !== targetDoc.id));
  };

  // 示例：保存新文档的逻辑（根据你的实际上传流程调整）
  const handleSave = (newDocument: DocumentUploaderFile) => {
    setSavedDocuments(prev => [...prev, newDocument]);
  };

  return (
    <div>
      {/* 上传区域和保存按钮（你的现有逻辑） */}
      {/* ... */}

      {/* 已保存文档汇总面板 */}
      <div className="saved-docs-container">
        {savedDocuments.map(doc => (
          <SavedDocument
            key={doc.id} // 用唯一id作为React元素的key
            document={doc}
            onDelete={handleDelete} // 传递删除方法给子组件
          />
        ))}
      </div>
    </div>
  );
};

2. 修改子组件SavedDocument接收并触发删除事件 #

更新子组件的props类型，添加删除回调，并绑定到DeleteIconSmall的点击事件：

// 更新props类型定义
type SavedDocumentProps = {
  document: DocumentUploaderFile;
  onDelete: (doc: DocumentUploaderFile) => void;
};

const SavedDocument = ({ document, onDelete }: SavedDocumentProps) => {
  return (
    <SavedDocumentWrapper>
      <StepCompleteIconSmall />
      <SavedDocumentName>{document.name}</SavedDocumentName>
      {/* 点击删除图标时，调用父组件传来的删除方法，传入当前文档 */}
      <DeleteIconSmall onClick={() => onDelete(document)} />
    </SavedDocumentWrapper>
  );
};

关键注意点 #

• 唯一标识：必须使用文档的唯一属性（如id）来过滤数组，不要用name——如果存在同名文档，会导致误删。
• 状态不可变：更新文档列表时，要返回新的数组（用filter或扩展运算符），不要直接修改原数组，符合React的状态更新规则。

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