Estoy tratando de usar ref creadas a partir de una matriz, pero cuando reviso la pestaña Componente de React Developer Tools, las ref pasadas a la input siempre están undefined . ¿Algo que me perdí aquí?
const MyComponent = () => { const refs = useMemo(() => Array(2).fill(0).map(i => React.createRef()), []); const TextInput = ({ name, value, inputRef }) => ( <input name={name} value={value} onChange={updateField()} ref={inputRef} /> ) return ( <TextInput name="lastname" value="Nom *" inputRef={refs[0]} /> <TextInput name="firstname" label="Prénom *" inputRef={refs[1]} /> ) }¡Gracias!
Si tiene un número variable de referencias, en su lugar querrá una referencia de estilo de función, como se muestra a continuación.
const TextInput = ({ name, value, refs }) => ( <input name={name} value={value} ref={(el) => { refs.current[name] = el; }} /> ); const MyComponent = () => { const refs = React.useRef({}); React.useLayoutEffect(() => { console.log(refs.current); }, []); return ( <> <TextInput name="lastname" value="Nom *" refs={refs} /> <TextInput name="firstname" value="Prénom *" refs={refs} /> </> ); };Esto registrará
{lastname: HTMLInputElement, firstname: HTMLInputElement}Por otro lado: nunca anide componentes, eso provocará renderizaciones innecesarias.