如何使用 React 创建 Select 目录？

Question

我需要将文件夹中的所有文件上传到服务器。我正在尝试实现 Select 目录 window，而不是 Select 文件。

正常方式如：

<input type="file" webkitdirectory directory/>

对我不起作用，显示 Select 文件 window。

但是当我用这个输入标签创建空的常规 html 文件时，它工作正常。有人知道如何使用 React 实现解决方案吗？

谢谢！

Answer 1

尝试bheptinh。

<input directory="" webkitdirectory="" type="file" />

Answer 2

在带有 Typescript 的 React 17 中，如果您使用 useRef Hook，最好的办法是扩展 React 的 HTMLAttributes（在您输入的同一文件中），然后简单地添加目录输入标签中的 webkitdirectory 属性为

import * as React from "react";

export const ImportForm: React.FunctionComponent<FormProps> = (props) => {
const folderInput= React.useRef(null);

return (
<>
           <div className="form-group row">
              <div className="col-lg-6">
                <label>Select Folder</label>
              </div>
              <div className="col-lg-6">
                <input
                  type="file"  
                  directory=""
                  webkitdirectory=""                
                  className="form-control"
                  ref={folderInput}
                />
              </div>
            </div>
</>)
};

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    directory?: string;        // remember to make these attributes optional....
    webkitdirectory?: string;
  }
}

如何使用 React 创建 Select 目录？

How to make Select Directory using React?

html

folderbrowserdialog

reactjs