Hoy noté que al usar un onChange personalizado en un Form.Control , el texto en el campo ya no cambia cuando se selecciona un archivo. Revisé la documentación en Git AQUÍ pero no dice cómo cambiar el texto con un evento personalizado.

mi código:

 // handles when a file has been selected. const handleUploadChange = (event) => { setFileToUpload(event.target.files[0]); setIsFilePicked(true); } // Footer containing buttons and file selection const CardFooter = () =>{ return( <Card.Footer> <div style={{width:"80%", display : "flex", flexDirection: "row", justifyContent: "center"}}> <div style={{marginRight: "40px"}}> <Form.Group controlId="formFile" className="mb-3"> <Form.Control type="file" custom onChange={handleUploadChange} label={fileToUpload === null ? "No File Selected" : fileToUpload.name}/> </Form.Group> </div> <div className="btn-red" style={{marginRight: "40px"}}> <Button disabled={fileToUpload === null} onClick={()=>{setFileToUpload(null); setIsFilePicked(false);}}>Clear</Button> </div> <div> <Button disabled={(fileToUpload === null) || (fileToUpload.size >= maxUploadSizeInBytes)} onClick={()=>handleSubmit(fileToUpload)}>Upload</Button> </div> </div> </Card.Footer> ) }

Como puede ver aquí, una vez que se selecciona un archivo, ocurre mi evento de cambio, pero el cuadro de selección todavía dice "No se eligió ningún archivo". He intentado label , text , displayName y placeholder así: label={fileToUpload === null ? "No File Selected" : fileToUpload.name}

¿Alguien sabe el accesorio adecuado para usar con un onChange personalizado?