0
165
Vistas¿Hay alguna manera de acceder dinámicamente a las propiedades de un ref en reaccionar?
Tengo un formulario con cuatro entradas de archivo. Diferentes entradas para archivos con diferentes propósitos.
He creado una referencia para cada archivo.
He creado una matriz de las referencias.
Al enviar, estaba tratando de acceder a todas las referencias y obtener sus ref.current.files[0].
Código de ejemplo a continuación:
import {useRef} from 'react'; export default function myComponent(props){ const file1 = useRef(null); const file2 = useRef(null); const file3 = useRef(null); const file4 = useRef(null); const fileRefs = [file1, file2, file3, file4]; function onSubmit(){ let files = []; fileRefs.map((ref) => { let obj = {}; obj.fileName = ref.current.files[0].name; obj.file = ref.current.files[0]; files.push(obj) }) } render( <div className="form"> <label>File 1 </label> <input type="file" ref={file1} /> <label>File 2 </label> <input type="file" ref={file2} /> <label>File 3 </label> <input type="file" ref={file3} /> <label>File 4 </label> <input type="file" ref={file4} /> <button onClick={() => onSubmit()}>Submit</button> </div> ) }Error: "Error de tipo: no se pueden leer las propiedades de nulo (leyendo 'archivos')"
Por lo tanto, no puedo acceder a la propiedad .current de una referencia de esta manera.
Realmente no sé cómo abordar este problema, solo estaba tratando de improvisar algo.
Si alguien pudiera ayudarme con una forma de acceder dinámicamente a las propiedades actuales de una referencia, sería genial.
2 Respuestas
Responde la pregunta0
No veo un problema en su código, per se, funciona si selecciona un archivo para todas las entradas de archivos. El problema solo se manifiesta si se deja alguna entrada sin un archivo seleccionado.
Para resolver esto, puede utilizar el operador de encadenamiento opcional para realizar una verificación nula en el objeto de archivo.
ref.current.files[0]?.name Si ref.current.files[0] es nulo o indefinido, el acceso al objeto de archivo se cortocircuita y se devuelve undefined; de lo contrario, el acceso continúa y se devuelve el nombre del archivo.
Código:
function onSubmit() { const files = fileRefs.map((ref) => ({ fileName: ref.current.files[0]?.name, file: ref.current.files[0], })); console.log({ files }); } 
0
En su código, en lugar de render use return , ha utilizado un componente funcional donde la función de render no está disponible. Consulte este enlace para ver la solución de trabajo https://codesandbox.io/s/wonderful-faraday-upg89?file=/src/App.js