请用react实现本地选择文件夹路径后将完整路径显示在页面上

以下是一个使用React的示例代码，可以选择文件夹并将其完整路径显示在页面上：

import React, { useState } from 'react';

function App() {
  const [folderPath, setFolderPath] = useState('');

  const handleChange = (event) => {
    setFolderPath(event.target.files[0].path);
  };

  return (
    <div>
      <input type="file" webkitdirectory onChange={handleChange} />
      <p>{folderPath}</p>
    </div>
  );
}

export default App;

在这个代码中，我们使用了React的useState钩子来保存文件夹路径。当文件夹选择器的值发生变化时，handleChange函数将被调用，它会更新文件夹路径的状态。

我们在input元素中添加了webkitdirectory属性，这可以让我们选择一个文件夹而不是文件。当用户选择文件夹时，文件夹的完整路径将会在event.target.files[0].path中。

最后，我们将文件夹路径显示在一个p元素中。

注意：此功能在不同浏览器中的支持情况不同。在某些浏览器中，选择文件夹的按钮可能看起来不一样。