Me resulta difícil borrar esta entrada de archivo que estoy configurando para setImportFile useState. Este es el useState que declaré
const [importFile, setImportFile] = React.useState<File | null>(); const [fileError, setFileError] = React.useState<string>("");Borro dos variables useState en este método const pero solo se borra una que es setFileError.
const clearModal = () => { setImportFile(null); setFileError(""); };Yo uso setImportFile en este método
const onChangeImportFile = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setImportFile(e.currentTarget.files ? e.currentTarget.files[0] : null); setSaving(true); };Este es mi renderizado en el que uso el botón Borrar y solo se borrará el error, pero la entrada del archivo no se borrará. Quiero vaciar todo en el modal.
<Form.Control type="file" accept='.csv, .xls, .xlsx' required className="primary mb-3" name="" onChange={onChangeImportFile} /> <Button variant="secondary" onClick={clearModal} > Clear </Button>Creo que necesita pasar el valor del estado a Form.Control, para controlarlo (de lo contrario, no obtendrá su valor del estado).
<Form.Control type="file" accept='.csv, .xls, .xlsx' required className="primary mb-3" name="" value={importFile} onChange={onChangeImportFile} />No es necesario configurar File | null como SetStateAction se establecerá en undefined .
Prueba esto:
const [importFile, setImportFile] = React.useState<File>(); setImportFile(undefined);