FORMULARIOS

 10-0Formulario Minimalista con React (Solo Nombre)




















Comentarios

Publicar un comentario

Entradas más populares de este blog

10-2-formulario

  Explicación Detallada del Código  ListaDeNombres Este componente React permite agregar nombres a una lista y mostrarlos. Vamos a analizarlo parte por parte: Estructura General jsx Copy Download import { useState } from 'react' ; function ListaDeNombres ( ) { // Estados const [ nombre , setNombre ] = useState ( '' ) ; const [ nombres , setNombres ] = useState ( [ ] ) ; // Manejador del formulario const handleSubmit = ( e ) => { e . preventDefault ( ) ; if ( nombre . trim ( ) === '' ) return ; setNombres ( [ ... nombres , nombre ] ) ; setNombre ( '' ) ; } ; // Renderizado return ( < div > { /* Formulario para agregar nombres */ } < form onSubmit = { handleSubmit } > { /* Input controlado */ } < label > Nombre: < input type = " text " value = { nombre } ...
Leer más

10-3-Formulario

  Explicación Detallada del Código  ListaDeNombresAvanzada Este componente es una versión mejorada del anterior que almacena objetos completos en lugar de solo strings, con identificadores únicos. Aquí está el análisis completo: Estructura General jsx Copy Download import { useState } from 'react' ; function ListaDeNombresAvanzada ( ) { // Estados const [ nombre , setNombre ] = useState ( '' ) ; const [ personas , setPersonas ] = useState ( [ ] ) ; // Manejador del formulario const handleSubmit = ( e ) => { e . preventDefault ( ) ; if ( nombre . trim ( ) === '' ) return ; const nuevaPersona = { id : Date . now ( ) , nombre : nombre } ; setPersonas ( [ ... personas , nuevaPersona ] ) ; setNombre ( '' ) ; } ; // Renderizado return ( < div > < form onSubmit = { handleSubmit } > < label > Nombre: ...
Leer más

10-0Formulario Minimalista con React (Solo Nombre)

  Formulario Minimalista con React (Solo Nombre) jsx Copy Download import { useState } from 'react' ; function SimpleForm ( ) { const [ nombre , setNombre ] = useState ( '' ) ; const [ mensaje , setMensaje ] = useState ( '' ) ; const handleSubmit = ( e ) => { e . preventDefault ( ) ; if ( ! nombre . trim ( ) ) { setMensaje ( 'Por favor ingresa tu nombre' ) ; return ; } setMensaje ( ` ¡Hola ${ nombre } ! Formulario enviado correctamente. ` ) ; setNombre ( '' ) ; // Limpia el campo después del envío } ; return ( < div style = { { maxWidth : '300px' , margin : '20px auto' } } > < h2 > Formulario Simple </ h2 > < form onSubmit = { handleSubmit } > < div style = { { marginBottom : '10px' } } > < label > Tu nombre: < input ...
Leer más