{"id":1597,"date":"2020-08-16T18:25:58","date_gmt":"2020-08-17T00:25:58","guid":{"rendered":"https:\/\/www.jacobsoft.com.mx\/?p=1597"},"modified":"2025-02-20T13:37:48","modified_gmt":"2025-02-20T19:37:48","slug":"manejo-de-formularios-en-react-js","status":"publish","type":"post","link":"https:\/\/www.jacobsoft.com.mx\/es_mx\/manejo-de-formularios-en-react-js\/","title":{"rendered":"Manejo de Formularios en React.JS"},"content":{"rendered":"\n

En este video veremos como crear un formulario <\/strong>utilizando React.js<\/strong>, como asociar cada uno de los campos a las variables de estado<\/strong> y establecer su valor con el evento onChange<\/strong>, que nos permitir\u00e1 validar la informaci\u00f3n capturada en los campos del formulario.<\/p>\n\n\n\n

Al crear un formulario con la etiqueta <form> la acci\u00f3n del formulario se establece con el evento onSubmit, el cual invocar\u00e1 una funci\u00f3n que se encargar\u00e1 de realizar la validaci\u00f3n de los campos y realizar las acciones correspondientes al objetivo del formulario:<\/p>\n\n\n\n

<form onSubmit={this.onsubmit} >\n<\/form><\/code><\/pre>\n\n\n\n
En el ejemplo anterior, el formulario invoca la funci\u00f3n o m\u00e9todo onsubmit. Si ahora consideramos un s\u00f3lo campo:<\/p>\n\n\n\n
<form onSubmit={this.onsumbit}>\n  <input type=\"text\" name=\"nombre\" value={this.state.nombre} onChange={this.handleChange} \/>\n  <input type=\"submit\" name=\"submit\" value=\"Enviar\" \/>\n<\/form><\/code><\/pre>\n\n\n\n
Como se observa en el ejemplo anterior, el campo es un input de tipo text cuyo nombre o name es nombre. Lo importante en los formularios con React es utilizar los atributos value y el evento onChange.<\/p>\n\n\n\n
El atributo value est\u00e1 asignado a una variable de estado con el nombre: nombre y el evento onChange a una funci\u00f3n o m\u00e9todo que hemos llamado handleChange. Este m\u00e9todo o funci\u00f3n deber\u00e1 actualizar la variable de estado cada vez que el usuario escribe un caracter o pulsa una tecla en el teclado. Es decir, cada vez que ocurre esta acci\u00f3n se invocar\u00e1 el metodo handleChange y este deber\u00e1 enviar el dato capturado en el campo a la variable de estado.<\/p>\n\n\n\n
handleChange(event) {\n   \/\/Obtenemos el valor capturado en el campo y lo guardamos en una variable valor\n   const valor = event.target.value;\n   \/\/Mandamos el valor a la variable de estado llamada nombre\n   this.setState({nombre: valor});\n}<\/code><\/pre>\n\n\n\n
En la implementaci\u00f3n anterior, del m\u00e9todo handleChange, obtenermos el valor capturado en el campo y lo mandamos a la variable de estado, la cual est\u00e1 asignada al atributo value del campo en el formulario. Por lo tanto el valor capturado se guarda en la variable de estado y se muestra en el campo.<\/p>\n\n\n\n
Cuando el usuario oprima el bot\u00f3n Enviar, se invocar\u00e1 la funci\u00f3n onsumbit:<\/p>\n\n\n\n
onsubmit(event){\n   event.stopPropagation();\n   event.preventDefault();\n   \/\/El valor capturado lo obtenemos de la variable de estado\n   const datos = this.state.nombre;\n   \/\/ En la variable datos guardamos el valor capturado en el campo del formulario\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n