No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

useRef y formularios

21/30
Recursos

Aportes 31

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Caracter铆sticas y diferencias entre useRef y useState
useRef es un hook utilizado para obtener una referencia a los datos de un objeto con informaci贸n mutable. Es decir, es como una manera de siempre poder obtener los datos mas recientes mediante referencia de alg煤n objeto de html. En este caso referenciamos a los valores recientes de un formulario. Dos caracter铆sticas importantes de useRef es que los datos son persistentes en caso de que se re-renderice el componente. As铆 como tambi茅n, actualizar los datos de esta referencia no causan el re-render. Cabe recalcar la diferencia con useState, que la actualizaci贸n de datos es s铆ncrona, ya adem谩s como hemos mencionado, no se re-renderiza

Comparto este video para complementar el uso de useRef 馃槃

https://www.youtube.com/watch?v=raJjjm3rhhU

useRef:

  1. Genera una referencia al elemento y podremos acceder a los valores por medio de 鈥榗urrent鈥, y por este medio obtener lo que estamos typeando seg煤n sea el caso y poderlo transmitir a donde lo necesitemos.

  2. El elemento que tendr谩 la referencia debe tener atributo: ref={NOMBRE_USEREF}

  3. Podemos acceder a toda la data de la siguiente manera: new FormData(NOMBRE_USEREF.current);

  4. El elemento tambi茅n debe tener un atributo: name=鈥淣OMBRE鈥 y podremos acceder a la data que trae en current de la siguiente manera: formData.get(鈥楴OMBRE鈥);

joyita de clase 馃槷鉁
Siempre habia trabajado la data de mis inputs con useState.

.
Que bonito cuando se aprende algo nuevo.

Es mejor cambiar el atributo del boton a type=鈥渂utton鈥 en vez de hacer el preventDefault().

Los botones por default en un formulario son de tipo submit.

Ac谩 un poco m谩s de como funciona FormData por si quieren ver y hacer m谩s cosas

Se usan para obtener la informaci贸n de los formularios y mandarla regularmente al backend

  • Por ahora solo se har谩 el proceso de obtener la informaci贸n.
  • Primero nos traemos el hook
import React,{useRef} from 'react';
  • Lo inicializamos
const form = useRef(null);
  • Lo anclamos al formulario donde se va a usar con ref
<form action="/" className="form" ref={form}>
  • Agregamos un evento al boton
<input 
					type="button" 
					value="Log in" 
					className="primary-button login-button"
					onClick={handleSubmit}
					/>
  • Luego creamos la funci贸n que leer谩 los datos
const handleSubmit =()=>{
		const formdata = new FormData(form.current);
		const data = {
			username:formdata.get("email"),
			password:formdata.get("password")
		}

		console.log(data)//por ahora no se manda al backend
	}

UseRef: va a generar una referencia al elemento y poder acceder a los valores por medio de current y de esta forma tener lo que estamos tipeando seg煤n sea el caso y poderlo transmitir a donde sea el paso.

formData: es parte de javaScript y lo que nos va a permitir es instanciar todos los elementos que se encentren dentro de un formulario y los va a capturar conforme sean llenados y de esta forma cuando le demos on submit los va a tener presentes y podemos hacer con ellos lo que sea necesario tambi茅n podemos enviar todo el objeto en este caso que se genera con formData a lo que vendr铆a siendo el backend de esta forma va de una forma mas segura y encriptada para que esta informaci贸n no sea accesible por otras personas o que en este caso alguien malicioso quiera inspeccionar como se est谩 transmitiendo esta informaci贸n
ergo: tiene mucho mas valor formData que algunos otros metodos que puedas encontrar en el uso de useRef o useState.

Eso del FormData es de las mejores cosas que he aprendido hoy

Form Data es la herramienta fundamental para manejar todo tipo de envi贸 de formularios de manera segura, desde cuentas de usuarios, hasta cripto transacciones 馃槃

Para poder estructurar los datos y mostrarlos por consola, me pareci贸 mas practico usar el m茅todo fromEntries. Dejo enlace a la doc y un ejemplo. Saludos 馃憢
Link

    const data = Object.fromEntries(formData)
    console.log(data)

    // resultado: {user: 'usuario1', password: 'Contrase帽a1'}

Si les sale un warning como este en consola:

Warning: Invalid DOM property for. Did you mean htmlFor? 

Consideren buscar en sus labels la etiqueta for y cambiarla por htmlFor, es decir, de:

<label for="email" className="label">Email address</label>

a algo como:

<label htmlFor="email" className="label">Email address</label>

Fuente: Miami me lo confirm贸 (stackoverflow)

viniendo de VUEJS prefiero seguir haciendolo con useState

Video Recomendado. Ejemplos de uso de useRef: https://www.youtube.com/watch?v=D2ElJVzriCk

Importante conocer la API de Form Dara
https://developer.mozilla.org/es/docs/Web/API/FormData

The useRef Hook allows you to persist values between renders.

It can be used to store a mutable value that does not cause a re-render when updated.

It can be used to access a DOM element directly.

Example:
Use useRef to track application renders.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores

Espero que Oscar y Platzi tengan en cuenta las recomendaciones en cuanto a la manera en que 茅l transmite la informaci贸n, ya que usa muchas muletillas y palabras innecesarias que dificultan entender los conceptos de manera clara.
ejemplo:

Manera clara
Y asi, capturamos la informacion de un formulario y la podemos enviar al backend

Manera de Oscar
Y de esta forma, teniendo en cuenta las particularidades de lo que seria nuestra informacion, la podriamos capturar segun sea el caso y de acuerdo a como lo necesitemos, para asi, y segun lo necesitemos podamos enviarla al backend en caso de que esta sea requerida

Si vemos esto como cualquier lenguaje de programacion, se hace muy complicado interpretar y compilar este codigo, me obliga a usar toda a RAM para poder entender el mensaje que importa 馃槴

Si no fuera por los otros cursos de react que da juandc, se me haria imposible entenderle a Oscar

Primera vez que le entiendo a la perfecci贸n a useRef, normalmente los 鈥楶ros鈥 en la industria no lo explican, me pregunto si es por envidia o porque no saben de entrada como usar el hook, ya que por lo que veo es la base para entender librer铆as de formularios comunes en react como Formik

Bastante interesante FormData, es la primera vez que lo veo, aqu铆 pueden encontrar la documentaci贸n de este constructor. Tambi茅n se puede utilizar para setear nuevos valores en los input

No se si en un futuro se ense帽茅 lo siguiente, pero existe una librer铆a muy usada para trabajar con formularios muy sencilla y que tiene el event.preventDefault por defecto, se llama "Formik"
Les dejo en enlace aqu铆

He estado viendo de que si es mejor preventDefault() o 鈥榯ype=button鈥 para el tema de botones.

Honestamente si que type=button puede ser mejor opcion para un proyecto que recien nace.
El PRO de preventDefault() es que hace nuestro c贸digo declarativo y que en metodos de peticiones para aplicaciones m谩s complejas utilizar esto es una buena opcion.
.
Lo aconsejable es dejarlo con preventDefault() con proyectos grandes porque asi cuando se tenga que dar mantenimiento a dicho proyecto, esto para el programador que viene le sera m谩s facil el leer nuestro c贸digo.
.
Recuerda que hacemos c贸digo para humanos.

para aclara鈥 FormData es una interface de Web Api, no de react.

No se porque, pero en mi caso no me aparecia el HEADER en las rutas que a Oscar si. Por lo que en el return de ciertos pages lo agregue manualmente.


return(
<>

<Header/>
Aqui estaria todo tu demas codigo, si o si tiene que estar dentro de esto, de lo contrario el header no se renderiza
</>
)

Eso es lo unico que hay que agregar

De hecho el trabajo de useRef es almacenar variables, las que se pueden recuperar con el m茅todo .value. La diferencia con useState es que se pueden asignar directamente, es decir:
estancia.value = 'nuevo valor鈥
Y lo m谩s importante es que no generan re-render. Por ac谩 este youtuber lo explica largo y tendido:
https://www.youtube.com/watch?v=t2ypzz6gJm0&t=285s

UseRef, se me parece muchisimo a cuando estoy usando Angular con formularios reactivos.
Me refiero al FormBuilder Y al FormGroup.
excelente explicaci贸n profe oscar.

Esto se parece a angular con el FormGroup

Que buena esta clase, grandes conocimientos

Explicacion en resumen de toda la logica para utilizar useRef en un formulario