Skip to content

jhonPariona/_react-refs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚛️ 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 |

ref img

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.

  • 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>
      </>
    );
  }
}

📖 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} />
      </>
    );
  }
}

📖 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();
    }
  };
  ...
}

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

📖 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

📖 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>
  );
};

📖 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>
  );
};