10-React-Form

En los Formularios en React debemos:

• ninguna de las respuesta es correcta

• obtener los valores que se ingresan

• administrar el state del form

• delegar la administracion del state del form a un elemento contenedor

• validar cada valor ingresado

En un formulario controlado

• esta funcion actualiza el estado local directamente, sin usar el metodo 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 funcion no actualiza el estado local directamente sino que utiliza el metodo set

• tenemos una funcion, que sera la llamaa en cada actualizacion del input

Para definir un estado en un Hook debemos:

• importar useEffect

• importar useState

• importat useSelector

• importar useContext

• no necesitamos importar nada, simplemente lo definimos

Sintaxis correcta de definir un estado local en un Hook

• this.state={error:' '}

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

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

Tipos de Componentes en React:

• Coupled Components

• Uncontrolled Components

• Controlled Componentes

• Decoupled Components

Componentes No Controlados

• 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

• En este tipo de formularios solo tenemos la posibilidad de validar en el momento que hacemos el submit del form, cuando ontenemos los datos ingresados en el form

• Podemos usar referencia para obtener los valores del formulario desde el DOM, o utilizar los metodos de Document, para obtener los valores del Formulario

M2-10-React-Form

Para definir un estado en una Clase debemos:

• no necesitamos importar nada, simplemente los definimos

• importar useEffect

• importar useRef

• importar useState

• importar useReducer

Validar un Input

• si tenemos algun error, deshabilitamos el input de submit. Ahora nuestro state error, pasara a ser un objeto con cada tipo de error segun nuestro input, y agregamos deisabled para saber si nuestro from esta habilitado o no

• para ello podemos crear una funcion que valide dicha entrada

• tambien podemos agregar una ultima validacion en nuestro boton 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 agregar una validacion en nuestro boton de submit

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

• A medida que cambien los valores del Form, el componente guarda esos valoresen 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 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

• En la mayotia de las cosas tendremos no mas de un input

Input Dinámico en Forms Controlados

• Podríamos, por ejemplo, crear un simple input para que registre el nombre de una persona, y permita agregar familiares dinamicamente

• Ninguna respuesta 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

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