在 React / Typescript 中上传文件 -> 属性 'click' 在类型 'never' 上不存在

Question

我正在尝试在 React / Typescript 中上传文件。

const CSVImport = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const inputFile = useRef(null);

  const onButtonClick = () => {
    // `current` points to the mounted file input element
    inputFile.current && inputFile.current.click();
  };

  return (
    <>
      <Button onClick={onButtonClick}>import CSV</Button>
      <input
        type="file"
        id="file"
        ref={inputFile}
        style={{ display: "none" }}
      />
    </>
  );
};

问题是，inputFile.current.click() 有问题 -> 这是错误：

Property 'click' does not exist on type 'never'.

我需要在哪里设置类型？

非常感谢！！

Answer 1

也许您可以将类型传递给 useRef:

const inputFile = useRef<HTMLInputElement>(null);

Answer 2

这里解释了为什么会出现错误。

您应该定义引用的元素类型。由于您使用的是 input，请在 useRef 中输入 HTMLInputElement。像这样 const inputFile = useRef<HTMLInputElement>(null);.

在 React / Typescript 中上传文件 -> 属性 'click' 在类型 'never' 上不存在

upload File in React / Typescript -> Property 'click' does not exist on type 'never'

button

typescript

reactjs