Tengo un tipo de entrada simple = archivo. Estoy capturando el archivo seleccionado en el estado. Una vez que se selecciona un archivo y se hace clic en el botón Borrar, no se borra el estado. Esto causa
{archivoseleccionado.nombre}
para lanzar un error indefinido cuando el usuario hace clic en cancelar durante la siguiente selección de archivos.
¿Hay alguna manera de hacer que mi botón Borrar realmente borre el estado del archivo seleccionado? o una forma de manejar el error para que aún se pueda seleccionar un archivo?
import React, { useState, useEffect } from "react"; import PropTypes from "prop-types"; import AddIcon from "@mui/icons-material/Add"; import { withStyles } from "@material-ui/core/styles"; import Fab from "@mui/material/Fab"; const styles = () => ({ root: { boxSizing: "border-box", margin: "0", padding: "0" }, textInput: { textAlign: "center" }, test: { fontSize: "3rem" } }); const CampaignForm = props => { const { classes } = props; const [selectedFile, setSelectedFile] = useState(); const [isFileSelected, setIsFileSelected] = useState(false); const handleClear = event => { setIsFileSelected(false); setSelectedFile(""); console.log(selectedFile.name); }; const handleFileSelection = event => { setSelectedFile(event.target.files[0]); setIsFileSelected(true); }; return ( <div className={classes.root}> <h1 className={classes.textInput}>Text Campaign</h1> <div className={classes.textInput}> <label htmlFor='upload-csv'> <input style={{ display: "none" }} id='upload-csv' disabled={isFileSelected} name='upload-csv' type='file' onChange={handleFileSelection} /> <Fab color='primary' size='small' disabled={isFileSelected} component='span' aria-label='add' variant='extended'> <AddIcon /> Add CSV </Fab> </label> <br /> {isFileSelected ? ( <div> <br /> <button onClick={handleClear}>clear</button> <p>{selectedFile.name}</p> </div> ) : ( <p>No file added</p> )} </div> </div> ); }; CampaignForm.propTypes = { classes: PropTypes.object.isRequired }; export default withStyles(styles)(CampaignForm);Primero, debe establecer el valor nulo predeterminado en el estado del archivo seleccionado.
const [selectedFile, setSelectedFile] = useState(null);Luego, en el conjunto de funciones handleClear,
setSelectedFile(null);y final la condición debe ser
{isFileSelected ? ( <div> <br /> <button onClick={handleClear}>clear</button> <p>{selectedFile.name}</p> </div> ) : ( selectedFile === null && <p>No file added</p> )}[opcional]: el evento de selección de archivo predeterminado no vuelve a seleccionar el mismo archivo, por lo que si necesita permitir que el usuario seleccione el mismo archivo, agregue la siguiente propiedad en la etiqueta de entrada:
onClick={(event) => { event.target.value = null; }}tienes que hacerlo, en la función handleClear , supongo que setSelectedFile(event.target.files[0]); es un objeto json no una cadena,
setSelectedFile({}); como está setSelectedFile(""); configurando una cadena, la cadena no tiene .name solo json tiene eso
<p>{selectedFile.name}</p> entonces "".name name sería undefined , lo cual es correcto, su solución sería esta, espero que ayude
const handleClear = event => { setIsFileSelected(false); setSelectedFile({}); console.log(selectedFile.name); };