ReactJS-目录选择对话框不起作用

如何解决ReactJS-目录选择对话框不起作用

我想在我的React App中创建一个目录选择对话框。我遵循了this SO thread，该方法可能对某些人有效，但对我而言无效。编译时错误为

类型“ DetailedHTMLProps ”上不存在属性“目录”。

我升级后对最新的RC版本17.rc.1做出了反应，认为可能对此进行了错误修复，但未成功。

@ Scratch'N'Purr在评论中建议使用黑客在文件末尾使用标签来选择目录来添加此脚本。

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes,DOMAttributes<T> {
    // extends React's HTMLAttributes
    directory?: string;
    webkitdirectory?:string;
  }
}

解决方法

它在Javascript中工作正常，但问题出在Typescript。猜猜，您认为它是issue是正确的。

不过，您可以使用ref手动进行设置。

import * as React from "react";
import "./styles.css";

export default function App() {
  const ref = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (ref.current !== null) {
      ref.current.setAttribute("directory","");
      ref.current.setAttribute("webkitdirectory","");
    }
  },[ref]);

  return <input type="file" ref={ref} />;
}