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

Question

我想要在我的 React 应用程序中有一个目录选择对话框。我关注了this SO thread这可能对某些人有用，但对我不起作用。 获取编译时错误为

Property 'directory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'.

我将 React 升级到最新的 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;
  }
}

Answer 1

它在 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} />;
}