如何在@material-table/core的actions点击事件中打开文件浏览器

你不需要在组件JSX结构里提前写入<input type="file">节点（这类侵入式写法确实不适配material-table的actions配置逻辑），直接在onClick回调里动态创建临时文件输入元素即可，完全不改动现有组件结构：

actions={[
  {
    icon: 'upload',
    position: "toolbar",
    tooltip: "上传文件",
    onClick: () => {
      // 动态创建隐藏的文件选择input
      const fileInput = document.createElement("input");
      fileInput.type = "file";
      // 按需配置可选参数：限制文件类型、支持多选
      // fileInput.accept = ".pdf,.doc,.xlsx,image/*";
      // fileInput.multiple = true;

      // 绑定文件选择后的处理逻辑
      fileInput.addEventListener("change", (e) => {
        const files = e.target.files;
        if (files?.length) {
          // 此处编写拿到文件后的上传、解析等业务逻辑
          console.log("用户选中的文件：", files);
        }
        // 处理完成后移除临时DOM节点，避免冗余
        fileInput.remove();
      });

      // 主动触发点击，唤起系统文件浏览器
      fileInput.click();
    }
  }
]}

方案说明 #

• 完全适配@material-table/core的原生actions配置规则，不需要自定义组件重写工具栏，不需要修改现有表格其他逻辑
• 动态创建的input和你写在页面里的原生file input能力完全一致，支持所有原生属性配置
• 操作完成后临时节点会被自动清理，不会造成DOM冗余

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