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

【问题标题】：ReactJS- Directory selection dialog not workingReactJS-目录选择对话框不起作用
【发布时间】：2020-12-27 17:51:21
【问题描述】：

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

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

我将 react 升级到最新的 RC 版本 17.rc.1，认为可能有一个错误修复，但没有成功。

编辑

@Scratch'N'Purr 在 cmets 中建议使用标签在文件末尾添加此脚本以进行目录选择。

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

【问题讨论】：

你不能跳过使用它吗？只保留 webkit 目录？我找不到任何与“目录”相关的属性
两个属性都有同样的问题
@Kalhan.Toress 有没有办法覆盖默认的 JSX 输入来解决这个问题？
这听起来像是打字稿特有的问题。我不是打字稿专家，但看看这个answer 可能会有所启发。考虑到 input 是一个 HTML 元素，我不确定如何定义道具类型。也许有更多经验的人可以加入讨论。
所以我可能已经为你找到了答案：stackoverflow.com/a/56110375/6245650

标签： javascript reactjs typescript jsx typescript-typings

【解决方案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} />;
}

【讨论】：