es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Obtener la referencia del componente hijo en StencilJS

21 Jul, 2023 Programación

Tengo un componente padre y un componente hijo. El componente hijo crea campos de entrada de formulario con referencias dinámicas para obtener el valor o validar como esto:

private buildTextField(formElement: FormBuilderElement): HTMLInputElement {
    return <input type="text" name="{formElement.name}" id="{formElement.name}" value="" required="{formElement.required}" ref="{(el)" ==""> this[`${formElement.name}_ref`] = el as HTMLInputElement} />;
}

render() {
    return (
        <host>
            {
                this.formElements.map((fe) => (
                    <div>
                        <div>{this.buildInput(fe)}</div>
                    </div>
                ))
        }
        </host>
    );
}

this.formElements es una propiedad que se pasa desde el componente padre. Puedes ver que la referencia se crea dinámicamente a partir de la propiedad “name” del objeto FormBuilderElement. En el componente hijo, puedo simplemente hacer referencia a la referencia con this[${dynamicName}_ref] y obtengo perfectamente el elemento HTMLInputElement.

Ahora este componente hijo se crea en el render del componente padre de la siguiente manera:

render() {
    return (
        <host>
            <div>
                {
                    <my-form formelements="{this.formElements}" ref="{(el)" ==""> this.myformchild = el as HTMLElement} />
                }
            </my-form></div>
        </host>
    );
}

Puedes ver que también he agregado una referencia a “my-form”. Ahora quiero obtener los elementos HTMLInputElement del componente hijo “my-form” mediante sus referencias. Entonces, pensé que esto debería funcionar, pero obtengo “undefined”:

const requiredElement = this.myformchild[`${dynamicName}_ref`];

¿Cuál es la forma correcta de hacer referencia a las referencias especificadas en un componente hijo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder a las referencias especificadas en un componente hijo, debes utilizar el método React.forwardRef(). Este método te permite pasar la referencia desde el componente padre al componente hijo, el cual puede luego adjuntarla al elemento DOM deseado.

    En tu caso, puedes modificar el componente hijo de la siguiente manera:

    import React, { forwardRef, useRef } from 'react';

const MyForm = forwardRef((props, ref) => {
  const inputRefs = useRef({});

  const buildTextField = (formElement) => {
    return (
      <input type="text" name="{formElement.name}" id="{formElement.name}" value="" required="{formElement.required}" ref="{(el)" ==""> inputRefs.current[formElement.name] = el}
      />
    );
  }

  return (
    <div ref="{ref}">
      {props.formElements.map(formElement => (
        <div key="{formElement.name}">
          {buildTextField(formElement)}
        </div>
      ))}
    </div>
  );
});

export default MyForm;

    Aquí, estamos utilizando el Hook useRef() para crear un objeto mutable en el que almacenaremos nuestras referencias de los campos de entrada. En lugar de utilizar referencias dinámicas basadas en el nombre del campo de entrada, estamos utilizando claves de objeto para almacenar y acceder a las referencias. Esto facilita su iteración en el componente padre.

    En el componente padre, puedes acceder a las referencias de los campos de entrada de la siguiente manera:

    import React, { useRef } from 'react';
import MyForm from './MyForm';

const ParentComponent = () => {
  const formRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();

    const requiredElement = formRef.current.inputRefs.required_input;
    console.log(requiredElement.value);
  }

  return (
    <div>
      <myform formelements="{formElements}" ref="{formRef}"></myform>
      <button onclick="{handleSubmit}">Submit</button>
    </div>
  );
};

export default ParentComponent;

    Aquí, estamos creando una referencia de formulario con useRef(), y pasándola al componente MyForm como una propiedad. Dentro del método handleSubmit(), podemos acceder al elemento de entrada requerido utilizando formRef.current.inputRefs.required_input.

    Al utilizar React.forwardRef(), podemos pasar la referencia al componente hijo y acceder a los elementos deseados cuando sea necesario.

Comments are closed.