Tipos de Componentes en React:

• 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

• Esta función actualiza el estado local directamente, sin usar el método set

• Tenemos una función, que será llamada en cada actualizacón del input

Tipos de Componentes en React:

• Uncontrolled Components

• Coupled Componenets

• Decoupled Components

• Controlled Components

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

• 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

• A medida que cambien los valores del Form, el componente guarda esos valores en su state

• 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

Validar un Input

• También podemos agregar una ultima validacion en nuestro botón de submit para saber si pasamos o no las validaciones anteriores

• Podemos validar un input dependiendo de que datos se tengan que ingresar

• No es posible agragar una validación en nuestro botón de submit

• Para ello podemos crear una función que valide dicha entrada

• 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

Sintaxis correcta de definir un estado local en un Hook

• const [error, setError] = useState('');

• this.state = { error: ' ' };

• const [error, setError] = useDispatch('');

Input Dinámico en Forms Controlados

• 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

• Dependiendo del usuario que utilice nuestre formulario, dinamicamente podemos crear inputs que se adapten a cada usuario

• Ninguna respuesta es correcta

Para definir un estado en un Hook debemos:

• Importar useState

• Importar useEffect

• No necesitamos importar nada, simplemente lo definimos

• Importar useContext

• Importar useSelector

En los Formularios en React debemos:

• Ninguna respuesta es correcta

• Delegar la Administración del state del form a un elemento contenedor

• Obtener los valores que se ingresan

• Administrar el state del form

• Validar de cada valor ingresado

Para definir un estado en una Clase debemos:

• Importar useState

• Importar useRef

• Importar useReducer

• Importar useEffect

• No necesitamos importar nada, simplemente lo definimos

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

• 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

• Los datos del Form son manejados por el propio DOM

• 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