Font size
WorksheetsForms
Total questions: 11
Worksheet time: 6mins
Sintaxis correcta de definir un estado local en un Hook
const [error, setError] = useState('');
const [error, setError] = useDispatch('');
this.state = { error: ' ' };
Componentes Controlados
Nuestro objetivo es que cada vez que cambien los valores de nuestro Form no lo vayamos almacenando en nuestro state, ya que el estado no puede mutar
En la mayoria de los casos tendremos mas de un input. Para manejarlos podemos agregar el atributo name a cada uno y dejar que nuestra funcion que maneje los cambios decida que hacer dependiendo de cada valor de e.target.name
A medida que cambien los valores del Form, el componente guarda esos valores en su state
Nuestro objetivo es que cada vez que cambien los valores de nuestro Form lo vayamos almacenando en nuestro state
En la mayoria de los casos tendremos no mas de un input
Para definir un estado en una Clase debemos:
No necesitamos importar nada, simplemente lo definimos
Importar useEffect
Importar useState
Importar useRef
Importar useReducer
En los Formularios en React debemos:
Administrar el state del form
Obtener los valores que se ingresan
Delegar la Administración del state del form a un elemento contenedor
Validar cada valor ingresado
Componentes No Controlados
En este tipo de formularios solo tenemos la posibilidad de validar en el momento en que hacemos el submit del form, cuando obtenemos los datos ingresados en el form
A medida que cambien los valores del Form, el componente guarda esos valores en su state
En este tipo de formularios tenemos la posibilidad de validar en los datos en todo momento
Los datos del Form son manejados por el propio DOM
Podemos usar una referencia para obtener los valores del formulario desde el DOM, o utilizar los metodos de document, para obtener los valores del Formulario
En un formulario controlado
Esta función no actualiza el estado local directamente, sino que utiliza el método set
En este tipo de formularios solo tenemos la posibilidad de validar en el momento en que hacemos el submit del form, cuando obtenemos los datos ingresados en el form
Tenemos una función, que será llamada en cada actualizacón del input
Esta función actualiza el estado local directamente, sin usar el método set
Les gustó este quizz?
No
No
Tipos de Componentes en React:
Uncontrolled Components
Controlled Components
Coupled Components
Decoupled Components
Input Dinámico en Forms Controlados
Dependiendo del usuario que utilice nuestre formulario, dinamicamente podemos crear inputs que se adapten a cada usuario
Ninguna es correcta
Tendremos que iterar sobre ese arreglo de objetos y por cada elemento renderizar un nuevo input, dependiendo la cantidad de keys que tenga en el objeto
Podríamos, por ejemplo, crear un simple input para que registre el nombre de una persona, y permita agregar familiares dinamicamente
Para definir un estado en un Hook debemos:
N o necesitamos importar nada, simplemente lo definimos
Importar useEffect
Importar useContext
Importar useState
Importar useSelector
validar el input
Para ello podemos crear una función que valide dicha entrada
Podemos validar un input dependiendo de que datos se tengan que ingresar
También podemos agregar una ultima validacion en nuestro botón de submit para saber si pasamos o no las validaciones anteriores
No es posible agragar una validación en nuestro botón de submit
Si tenemos algun error, deshabilitamos el input de submit. Ahora nuestro state error, pasara a ser un objecto con cada tipo de error segun nuestro input, y agregaremos disabled para saber si nuestro form esta habilidado o no
