如何允许用户访问带有<input />标签的文件夹和文件选择对话框？

Question

在HTML中使用是可能的

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

但是React似乎不理解传递给输入的webkitdirectory和directory道具。

如何启用此功能？

Answer 1

要使其工作，您需要为directory和webkitdirectory属性传递一个空字符串(来源：https://github.com/facebook/react/issues/3468)。

以下是React的博客文章，介绍了未知DOM属性的渲染：React 16 中的DOM属性

function App() {
return (
<div>
<input type="file" directory="" webkitdirectory="" />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

只需添加空字符串即可实现

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

------------或者---------------

您可以在componentDidMount((方法中通过在节点上放置ref来实现这一点。

componentDidMount() {
this.refs.x.directory = true;
this.refs.x.webkitdirectory = true;
}