En mi aplicación de reacción, tengo una barra lateral con funcionalidad de enrutamiento. Para uno de los elementos de la barra lateral, quiero que abra el menú del explorador de archivos al hacer clic. Sin embargo, debido al enrutamiento, no puedo poner la sintaxis del explorador de archivos
<input type = "file", name = "file", onChange = {{selectFileHandler}} />A continuación se muestran los fragmentos de mi aplicación:
SidebarItems.js
const SidebarItems = [ { { name: "Page 1", route: '/' }, { name: "Load-File", route: '/loadfile' }, ]; export default SidebarItems;Barra lateral.js
const Sidebar = () => { const [sidebar, setSidebar] = useState(false); const showSidebar = () => setSidebar(!sidebar); return ( <> <IconContext.Provider value={{ color: "#fff" }}> <Nav> <NavIcon to="#"> <FaIcons.FaBars onClick={showSidebar} /> </NavIcon> <h1> My page </h1> </Nav> <nav> <ul className='nae-menu-items' onClick={showSidebar}> {SidebarData.map((item, index) => { return( <li key={index} /> <Lint to={item.route}> <span>{item.name}</span> ); })} </nav> </IconContext.Provider> </> ); }; export default Sidebar;Y las Rutas.js:
function Routes() { return ( <Router> <Switch> <Route path="/" exact component={Page1}/> <Route path="/loadfile" component={loadfile}/> </Switch> </Router> ) } export default Routes;¿Cómo puedo modificar la parte del archivo de carga en el enrutador para que se comporte como un botón que abrirá directamente el explorador de archivos?
No es sencillo, pero aquí hay una demostración aproximada: https://codesandbox.io/s/stoic-bush-0s6l6
Si hace clic en 'Alternar', se monta un <FilePickOpener /> que debería abrir automáticamente el cuadro de diálogo:
const FilePickOpener = () => { const inputFileRef = useRef(null); const onClick = () => { inputFileRef.current.click(); }; useEffect(() => { inputFileRef?.current && inputFileRef.current.click(); }, [inputFileRef]); return ( <form style={{ visibility: "collapse" }}> <input type="file" ref={inputFileRef} /> <button onClick={onClick}></button> </form> ); };Descargo de responsabilidad: solo lo he probado en Chrome, puede o no funcionar en otros navegadores. El comprador tenga cuidado.
Actualización : como se temía, no funcionará en Safari. Probablemente una función de seguridad que requiera un clic real para iniciar.