Ant Design Upload Dragger外部按钮触发弹窗报错：click不是函数

错误原因 #

1. 变量名笔误：定义的ref是dialogRef，但browseHandler里写成了dialog.current，导致找不到正确的ref对象。
2. Ant Design的Dragger/Upload组件的ref指向的是组件实例，不是DOM元素，直接调用click()自然会报错——组件实例没有这个方法。
3. 代码里未导入useRef，运行时会先触发这个基础错误。

修正方案 #

1. 导入useRef；
2. 修正ref变量名的笔误；
3. 通过组件实例的uploadRef获取内部的文件选择input元素，再触发点击。

修正后的完整代码 #

import { useRef } from 'react';
import { Upload } from "antd";
// 假设VStack、HStack、Text、Button、SvgIcon是你项目中已正确导入的组件

const CustomUpload = (props) => {
  const dialogRef = useRef() 
  const { Dragger } = Upload;
  
  const browseHandler = () => {
    // 触发内部文件选择框的点击事件
    dialogRef.current?.uploadRef?.current?.click();
  };

  return (
    <Dragger {...props} ref={dialogRef}>
      <VStack padding={"56px"}>
        <HStack
          alignItems="center"
          justifyContent="center"
          marginBottom={"24px"}
        >
          <SvgIcon id="upload" size={8} />
          <VStack justifyContent="flex-start">
            <Text type="body1">Drag and drop your files here</Text>
            <Text type="caption">File supported: XLSX only.</Text>
          </VStack>
        </HStack>
        <Button
          label="BROWSE FILES"
          variant="primary"
          onPress={browseHandler}
        />
      </VStack>
    </Dragger>
  )
}

export default CustomUpload;

补充说明 #

如果你的Ant Design版本较新，也可以直接调用组件实例的openFileDialog方法，代码更简洁：

const browseHandler = () => {
  dialogRef.current?.openFileDialog();
};

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