jhonpariona/_react-refs

⚛️ Refs

Poder hacer referencia de un elemento del DOM o de un componente de clase (class components porque tiene instancia)

📖 Documentación | 🎬 Como usar react refs _ Leo Medina |

Se puede hacer uso para:

• Controlar focus, selección de textos o reproducción de medios
• Integracion con bibliotecas DOM de terceros

El atributo ref es especial y solo se puede usar en componentes de clase y elementos del DOM

Create ref

📖 Documentación

"React asignará a la propiedad current el elemento del DOM cuando el componente sea montado, y la asignará de nuevo null cuando sea desmontado. La referencia es actualizada antes de los métodos componentDidMount o componentDidUpdate"

No puedes hacer uso de referencias de componentes de función debido a que no tienen instancias.

createRef a un elemento del DOM

• El método createRef devuelve un objeto que en la clave current tiene la referencia al elemento DOM

class CreateRef extends React.Component {
/* Crea una referencia(crea un objeto) para guardar el elemento textInput del DOM */
  inputRef = React.createRef();
...

• Pasamos la referencia en el atributo ref del elemento que queremos

return (
  <>
    <input type="text" ref={this.inputRef} />
  </>
);

• Podemos usar esa referencia en cualquier lugar de la clase y para hacer referencia al elemento DOM debemos acceder a la clave curent

class CreateRef extends React.Component {
  //...
  handleFocus = () => {
    if (this.inputRef) {
      console.log("Focus");
      /* Estamos accediendo la propiedad "current" para obtener el nodo del DOM */
      this.inputRef.current.focus();
    }
  };
  //...
  render() {
    return (
      <>
        <h2>
          {/* ... */}
          <input type="text" ref={this.inputRef} />
          <button onClick={this.handleFocus}>Focus</button>
        </h2>
      </>
    );
  }
}

createRef a un componente de clase

📖 Documentación |

Podemos hacer un ref a componentes de clase Personalizados y poder hacer uso de sus métodos en el padre.

• En el hijo tenemos el ref y el método que hacen focus

class CustomTextInput extends React.Component {
  /* Crea una referencia(crea un objeto) para guardar el elemento textInput del DOM */
  inputRef = React.createRef();

  handleFocus = () => {
    if (this.inputRef) {
      console.log("Focus");
      /* Estamos accediendo la propiedad "current" para obtener el nodo del DOM */
      this.inputRef.current.focus();
    }
  };

  render() {
    return (
      <>
        <h2>
          <input type="text" ref={this.inputRef} />
        </h2>
      </>
    );
  }
}

• Hacemos uso del método handleFocus en el padre para simular un click y que se haga focus al montar el componente

class CreateRefClassComponent extends React.Component {
  /* Crea una referencia(crea un objeto) para guardar la instancia del componente de clase la cual nos permitirá acceder a sus métodos*/
  autofocusRef = React.createRef();

  componentDidMount() {
    /* Podemos tener acceso a sus métodos que estan almacenados en la propiedad current */
    this.autofocusRef.current.handleFocus();
  }

  render() {
    return (
      <>
        <CustomTextInput />
        <CustomTextInput ref={this.autofocusRef} />
      </>
    );
  }
}

Callback ref

📖 Documentación |

React llamara al callback del ref con el elemento del DOM cuando el componente sea montado, y lo llamara con null cuando este se desmonte. Se asegura que las referencias serán actualizadas antes que el componentDidMount o el componentDidUpdate sean ejecutados.

• Pasamos una función al prop ref esta funcion recibirá al elemento como argumento

return (
  <>
    <input type="text" ref={this.setInputTextRef} />
    <button onClick={this.handleFocus}>focus</button>
  </>
);

• almacenamos el elemento en una propiedad y podemos hacer uso de el en la clase

class CallbackRef extends React.Component {
  inputText = null;

  /* Esta funcion recibe como parámetro el elemento del DOM y podemos asignarlo a una  propiedad*/
  setInputTextRef = (element) => {
    this.inputText = element;
  };

  handleFocus = () => {
    /* comprobamos que el elemento este montado en el DOM */
    if (this.inputText) {
      console.log("focus");
      this.inputText.focus();
    }
  };
  ...
}

String Ref

Se encuentra actualmente deprecado y no se debe de usar

Solo funciona en class components

• Agregamos una prop llamada ref con un string que viene a ser el nombre del ref que usaremos para acceder al elemento

return (
  <>
    <input type="text" ref="nameRef" />
    <button onClick={this.handleFocus}>focus</button>
  </>
);

• Podemos hacer uso de métodos que existen en el elemento nativo

handleFocus = () => {
  console.log("click in focus");
  console.log(this.refs.nameRef);
  this.refs.nameRef.focus();
};

⚛️ Forwarding Ref

Reenvio de ref es una característica opcional que permite pasar ref entre componentes

Fordward ref

📖 Documentación

Solo funciona para componentes funcionales y a partir de react 16.3

• En el componente padre creamos la ref y la pasamos como parámetro ref al componente funcional hijo

const GrandParent = () => {
  /* Creamos la ref */
  const nameRef = React.createRef();
  return (
    <div>
      {/* La pasamos al compoennte hijo */}
      <CustomComponent ref={nameRef} />
    </div>
  );
};

• Envolvemos el componente hijo(componente funcional) con React.forwardRef el cual recibe una funcion que tiene como segundo parámetro el ref y la asignamos al elemento DOM o componente de clase que queremos referenciar.

const CustomComponent = React.forwardRef((props, ref) => {
  return (
    <div>
      <input type="text" ref={ref} />
    </div>
  );
});

Implementación anterior a react 16.3

CreateRef

📖 Documentación

Podemos pasar una prop con un nombre alternativo a ref

• Creamos la ref en el componente padre y la enviamos al hijo como una prop con un nombre diferente a ref

class GrandParent extends React.Component {
  constructor(props) {
    super(props);
    /* Creamos el ref */
    this.nameRef = React.createRef();
  }
  render() {
    /* LO enviamos en una prop */
    return <Parent inputRef={this.nameRef} />;
  }
}

• Asignamos la ref que pasamos al elemento o clase en su atributo ref

const CustomComponent = (props) => {
  return (
    <div>
      {/* Asignamos la prop recibida */}
      <input type="text" ref={props.inputRef} />
    </div>
  );
};

CallbackRef

📖 Documentación

Podemos pasar una prop con un nombre alternativo a ref

• Creamos el callback en el componente padre y la enviamos al hijo como una prop con un nombre diferente a ref

class GrandParent extends React.Component {
  nameRef = null;
  callbackRef = (element) => {
    this.nameRef = element;
  };
  render() {
    /* LO enviamos en una prop */
    return <Parent inputRef={this.callbackRef} />;
  }
}

• Asignamos la ref que pasamos al elemento o clase en su atributo ref

const CustomComponent = (props) => {
  return (
    <div>
      {/* Asignamos la prop recibida */}
      <input type="text" ref={props.inputRef} />
    </div>
  );
};