Estoy usando el arranque de reacción en mi aplicación de demostración. Quiero establecer el valor en el archivo de tipo de entrada. también quiero eliminar el valor del campo de archivo de tipo de entrada después de 10 segundos (si hay algún valor). Es posible ?
lo intenté así
const [val, setValue] = useState(""); useEffect(() => { setTimeout(() => { setValue(""); }, 10000); }, []); const onchange = (e) => { setValue(e.target.value); };HTML
<Form> <Form.Group controlId="formFile" className="mb-3"> <Form.Label>Default file input example</Form.Label> <Form.Control type="file" value={val} onchange={onchange} /> </Form.Group> </Form>aquí está mi código completo https://codesandbox.io/s/react-bootstrap-form-forked-i3zdo5?file=/src/index.js:451-686
mi selección de archivo no funciona después de agregar value={val}
Necesita actualizar su función onchange a algo como:
const onchange = (e) => { setValue(e.target.files[0]); }; Su función onchange funciona bien para entradas de texto (y algunas otras), pero fallará cuando el tipo de entrada sea file . No debe asegurarse de ver qué tipo de evento se devuelve antes de procesarlo, ya que estos eventos dependen del tipo de elementos a partir de los cuales se generan y la causa del evento.
Editar: el valor no funciona en el elemento de entrada del archivo, solo puede establecerlo mediante programación en una cadena vacía. Tal vez intente usar ref para borrar la entrada que se está seleccionando.
En primer lugar, no puede establecer el valor del archivo de tipo de entrada, por lo que asignar un valor no es una buena idea, y si desea borrar si el usuario seleccionó algún archivo, entonces debe hacer dos cosas
1.Crear ref para apuntar el archivo de tipo de entrada y asignarlo al componente ref prop
const fileInputRef = useRef();
y en el método de renderizado úsalo así
<Form.Control ref={fileInputRef} type="file" onChange={onchange} />también necesita cambiar onchange a onChange en reaccionar
dentro de su devolución de llamada useEffect, deberá agregar dependencias y establecer un tiempo de espera como este
useEffect(() => { setTimeout(() => { if (val !== "") { fileInputRef.current.value = ""; setValue(""); } }, 10000); }, [setValue, val]);