Guía para Formularios en React

Crear formularios en React es una tarea común al desarrollar aplicaciones web. React proporciona una forma eficiente y declarativa de manejar formularios, lo que facilita la interacción del usuario y la gestión de los datos ingresados. Para comenzar a crear formularios en React, hay varios conceptos importantes que debes comprender:

1. Componentes controlados y no controlados: En React, hay dos enfoques principales para manejar formularios: componentes controlados y componentes no controlados. Los componentes controlados son aquellos cuyos valores están controlados por el estado de React, mientras que los componentes no controlados dejan que el DOM maneje el estado.

2. Estado y eventos: Para crear formularios controlados en React, necesitas utilizar el estado para almacenar y actualizar los valores de los campos del formulario. Además, debes manejar los eventos del formulario, como onChange para actualizar el estado cuando el usuario realiza cambios en los campos del formulario.

3. Elementos de formulario de React: React proporciona componentes específicos para crear diferentes tipos de entradas de formulario, como , </code>, <code><select></code>, etc. Estos elementos de formulario aceptan propiedades especiales, como <code>value</code> y <code>onChange</code>, que son fundamentales para crear componentes controlados.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </li> </ol> <p>A continuación, te mostraré un ejemplo básico de cómo crear un formulario controlado en React:</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>jsx</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-jsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">function</span> <span class="hljs-title function_">Formulario</span>(<span class="hljs-params"></span>) { <span class="hljs-comment">// Definimos el estado para cada campo del formulario</span> <span class="hljs-keyword">const</span> [nombre, setNombre] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">''</span>); <span class="hljs-keyword">const</span> [email, setEmail] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">''</span>); <span class="hljs-comment">// Manejadores de eventos para actualizar el estado cuando cambian los campos del formulario</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleNombreChange</span> = (<span class="hljs-params">event</span>) => { <span class="hljs-title function_">setNombre</span>(event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>); }; <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleEmailChange</span> = (<span class="hljs-params">event</span>) => { <span class="hljs-title function_">setEmail</span>(event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>); }; <span class="hljs-comment">// Manejador de evento para enviar el formulario</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleSubmit</span> = (<span class="hljs-params">event</span>) => { event.<span class="hljs-title function_">preventDefault</span>(); <span class="hljs-comment">// Aquí puedes realizar acciones como enviar los datos a un servidor</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Nombre:'</span>, nombre); <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Email:'</span>, email); }; <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{handleSubmit}</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"nombre"</span>></span>Nombre:<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nombre"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{nombre}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{handleNombreChange}</span> /></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"email"</span>></span>Email:<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{email}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{handleEmailChange}</span> /></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Enviar<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> ); } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Formulario</span>; </code></div></div></pre> <p>En este ejemplo:</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> <ul> <li>Utilizamos el hook <code>useState</code> de React para crear estado local para los campos <code>nombre</code> y <code>email</code>.</li> <li>Definimos funciones de manejo de eventos <code>handleNombreChange</code> y <code>handleEmailChange</code> para actualizar el estado cuando cambian los campos del formulario.</li> <li>Utilizamos la función <code>handleSubmit</code> para manejar el evento <code>onSubmit</code> del formulario, que en este caso simplemente muestra los valores de los campos en la consola.</li> </ul> <p>Este es solo un ejemplo básico para mostrarte cómo crear un formulario controlado en React. Dependiendo de tus necesidades específicas, puedes agregar validación de entrada, campos adicionales, integración con librerías de UI, entre otras cosas. ¡Espero que esta introducción te ayude a empezar a trabajar con formularios en React!</p> </div> </div> <h2>Más Informaciones</h2> <p><img decoding="async" src="https://revistacompleta.com/pic/more_info.png" class="center"></p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> <div data-message-author-role="assistant" data-message-id="e8d99f11-d0f9-413b-9ea5-39b25d7f820c" class="min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto"> <div class="markdown prose w-full break-words dark:prose-invert light"> <p>Por supuesto, profundicemos un poco más en la creación de formularios en React y exploremos algunas técnicas adicionales que pueden resultar útiles en el desarrollo de aplicaciones web más complejas.</p> <h3>Validación de Entrada:</h3> <p>La validación de entrada es crucial para garantizar que los datos ingresados por el usuario cumplan con ciertos criterios antes de enviar el formulario. Puedes implementar la validación de entrada utilizando condiciones lógicas en los manejadores de eventos <code>onChange</code>, o puedes optar por bibliotecas de validación de formularios como Formik o React Hook Form.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> <h4>Ejemplo de validación básica utilizando condiciones lógicas:</h4> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>jsx</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-jsx"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleNombreChange</span> = (<span class="hljs-params">event</span>) => { <span class="hljs-keyword">const</span> value = event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>; <span class="hljs-comment">// Validación: nombre debe tener al menos 3 caracteres</span> <span class="hljs-keyword">if</span> (value.<span class="hljs-property">length</span> >= <span class="hljs-number">3</span>) { <span class="hljs-title function_">setNombre</span>(value); } }; </code></div></div></pre> <h3>Manejo de Estado con Formik:</h3> <p>Formik es una biblioteca popular en la comunidad de React que simplifica el manejo de formularios y la validación de entrada. Proporciona un enfoque más estructurado y declarativo para trabajar con formularios en React, eliminando la necesidad de administrar manualmente el estado y los eventos del formulario.</p> <h4>Ejemplo de uso de Formik:</h4> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>jsx</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-jsx"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Formik</span>, <span class="hljs-title class_">Form</span>, <span class="hljs-title class_">Field</span>, <span class="hljs-title class_">ErrorMessage</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'formik'</span>; <span class="hljs-keyword">function</span> <span class="hljs-title function_">Formulario</span>(<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Formik</span> <span class="hljs-attr">initialValues</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">nombre:</span> '', <span class="hljs-attr">email:</span> '' }} <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{(values)</span> =></span> { // Aquí puedes manejar el envío del formulario console.log('Formulario enviado:', values); }} validate={(values) => { const errors = {}; // Validación personalizada if (!values.nombre) { errors.nombre = 'Campo requerido'; } // Puedes agregar más validaciones aquí return errors; }} > <span class="hljs-tag"><<span class="hljs-name">Form</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"nombre"</span>></span>Nombre:<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">Field</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nombre"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nombre"</span> /></span> <span class="hljs-tag"><<span class="hljs-name">ErrorMessage</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"nombre"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">"div"</span> /></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"email"</span>></span>Email:<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">Field</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> /></span> <span class="hljs-tag"><<span class="hljs-name">ErrorMessage</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">"div"</span> /></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Enviar<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">Form</span>></span> <span class="hljs-tag"></<span class="hljs-name">Formik</span>></span></span> ); } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Formulario</span>; </code></div></div></pre> <h3>Uso de Componentes de UI para Formularios:</h3> <p>Puedes mejorar la apariencia y funcionalidad de tus formularios utilizando componentes de UI de bibliotecas como Material-UI, Ant Design o Bootstrap. Estas bibliotecas proporcionan componentes preestilizados y funcionales que puedes integrar fácilmente en tus aplicaciones React.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> <h4>Ejemplo utilizando Material-UI:</h4> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>jsx</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-jsx"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">TextField</span>, <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Grid</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@material-ui/core'</span>; <span class="hljs-keyword">function</span> <span class="hljs-title function_">Formulario</span>(<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{handleSubmit}</span>></span> <span class="hljs-tag"><<span class="hljs-name">Grid</span> <span class="hljs-attr">container</span> <span class="hljs-attr">spacing</span>=<span class="hljs-string">{2}</span>></span> <span class="hljs-tag"><<span class="hljs-name">Grid</span> <span class="hljs-attr">item</span> <span class="hljs-attr">xs</span>=<span class="hljs-string">{12}</span>></span> <span class="hljs-tag"><<span class="hljs-name">TextField</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Nombre"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outlined"</span> <span class="hljs-attr">fullWidth</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{nombre}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{handleNombreChange}</span> /></span> <span class="hljs-tag"></<span class="hljs-name">Grid</span>></span> <span class="hljs-tag"><<span class="hljs-name">Grid</span> <span class="hljs-attr">item</span> <span class="hljs-attr">xs</span>=<span class="hljs-string">{12}</span>></span> <span class="hljs-tag"><<span class="hljs-name">TextField</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outlined"</span> <span class="hljs-attr">fullWidth</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{email}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{handleEmailChange}</span> /></span> <span class="hljs-tag"></<span class="hljs-name">Grid</span>></span> <span class="hljs-tag"><<span class="hljs-name">Grid</span> <span class="hljs-attr">item</span> <span class="hljs-attr">xs</span>=<span class="hljs-string">{12}</span>></span> <span class="hljs-tag"><<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"contained"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"primary"</span>></span> Enviar <span class="hljs-tag"></<span class="hljs-name">Button</span>></span> <span class="hljs-tag"></<span class="hljs-name">Grid</span>></span> <span class="hljs-tag"></<span class="hljs-name">Grid</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></span> ); } </code></div></div></pre> <h3>Integración con Servidores y API:</h3> <p>Cuando el usuario envía un formulario, es común que desees enviar esos datos al servidor para su procesamiento adicional o almacenamiento en una base de datos. Puedes lograr esto mediante solicitudes HTTP utilizando la biblioteca Axios, Fetch API o las funciones integradas de React, como <code>fetch()</code>.</p> <h4>Ejemplo de envío de datos a un servidor utilizando Axios:</h4> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>jsx</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-jsx"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>; <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleSubmit</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">event</span>) => { event.<span class="hljs-title function_">preventDefault</span>(); <span class="hljs-keyword">try</span> { <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> axios.<span class="hljs-title function_">post</span>(<span class="hljs-string">'URL_DEL_SERVIDOR'</span>, { nombre, email }); <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Respuesta del servidor:'</span>, response.<span class="hljs-property">data</span>); <span class="hljs-comment">// Aquí puedes manejar la respuesta del servidor</span> } <span class="hljs-keyword">catch</span> (error) { <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Error al enviar el formulario:'</span>, error); } }; </code></div></div></pre> <p>Estas son solo algunas de las técnicas que puedes utilizar para mejorar y ampliar tus habilidades en la creación de formularios en React. Dependiendo de los requisitos específicos de tu aplicación, puedes explorar más opciones y personalizar tu enfoque para adaptarse mejor a tus necesidades. ¡Espero que esta información adicional sea útil para ti! Si tienes más preguntas o necesitas más detalles sobre algún aspecto específico, no dudes en preguntar.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </div> </div> </p> <div class="stream-item stream-item-below-post-content"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">Last Updated: 19/02/2024</span></div><!-- .post-meta --> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Gu%C3%ADa%20para%20Formularios%20en%20React&url=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/guia-para-formularios-en-react/&title=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/guia-para-formularios-en-react/&name=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/guia-para-formularios-en-react/&description=Gu%C3%ADa%20para%20Formularios%20en%20React&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/guia-para-formularios-en-react/&title=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://revistacompleta.com/guia-para-formularios-en-react/&redirect_uri=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://revistacompleta.com/guia-para-formularios-en-react/&redirect_uri=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Gu%C3%ADa%20para%20Formularios%20en%20React%20https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://revistacompleta.com/guia-para-formularios-en-react/&text=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Gu%C3%ADa%20para%20Formularios%20en%20React%20https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Gu%C3%ADa%20para%20Formularios%20en%20React%20https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> <a href="mailto:?subject=Gu%C3%ADa%20para%20Formularios%20en%20React&body=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Compartir por correo electrónico" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Compartir por correo electrónico</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2024-02-19T21:38:24+03:00","datePublished":"2024-02-19T21:38:24+03:00","dateModified":"2024-02-19T21:38:24+03:00","headline":"Gu\u00eda para Formularios en React","name":"Gu\u00eda para Formularios en React","keywords":[],"url":"https:\/\/revistacompleta.com\/guia-para-formularios-en-react\/","description":"Crear formularios en React es una tarea com\u00fan al desarrollar aplicaciones web. React proporciona una forma eficiente y declarativa de manejar formularios, lo que facilita la interacci\u00f3n del usuario y","copyrightYear":"2024","articleSection":"programaci\u00f3n","articleBody":"Crear formularios en React es una tarea com\u00fan al desarrollar aplicaciones web. React proporciona una forma eficiente y declarativa de manejar formularios, lo que facilita la interacci\u00f3n del usuario y la gesti\u00f3n de los datos ingresados. Para comenzar a crear formularios en React, hay varios conceptos importantes que debes comprender:Componentes controlados y no controlados: En React, hay dos enfoques principales para manejar formularios: componentes controlados y componentes no controlados. Los componentes controlados son aquellos cuyos valores est\u00e1n controlados por el estado de React, mientras que los componentes no controlados dejan que el DOM maneje el estado.Estado y eventos: Para crear formularios controlados en React, necesitas utilizar el estado para almacenar y actualizar los valores de los campos del formulario. Adem\u00e1s, debes manejar los eventos del formulario, como onChange para actualizar el estado cuando el usuario realiza cambios en los campos del formulario.Elementos de formulario de React: React proporciona componentes espec\u00edficos para crear diferentes tipos de entradas de formulario, como , , , etc. Estos elementos de formulario aceptan propiedades especiales, como value y onChange, que son fundamentales para crear componentes controlados.A continuaci\u00f3n, te mostrar\u00e9 un ejemplo b\u00e1sico de c\u00f3mo crear un formulario controlado en React:jsxCopy codeimport React, { useState } from 'react';\n\nfunction Formulario() {\n \/\/ Definimos el estado para cada campo del formulario\n const [nombre, setNombre] = useState('');\n const [email, setEmail] = useState('');\n\n \/\/ Manejadores de eventos para actualizar el estado cuando cambian los campos del formulario\n const handleNombreChange = (event) => {\n setNombre(event.target.value);\n };\n\n const handleEmailChange = (event) => {\n setEmail(event.target.value);\n };\n\n \/\/ Manejador de evento para enviar el formulario\n const handleSubmit = (event) => {\n event.preventDefault();\n \/\/ Aqu\u00ed puedes realizar acciones como enviar los datos a un servidor\n console.log('Nombre:', nombre);\n console.log('Email:', email);\n };\n\n return (\n \n \n Nombre:\n \n \n \n Email:\n \n \n Enviar\n \n );\n}\n\nexport default Formulario;\nEn este ejemplo:Utilizamos el hook useState de React para crear estado local para los campos nombre y email.Definimos funciones de manejo de eventos handleNombreChange y handleEmailChange para actualizar el estado cuando cambian los campos del formulario.Utilizamos la funci\u00f3n handleSubmit para manejar el evento onSubmit del formulario, que en este caso simplemente muestra los valores de los campos en la consola.Este es solo un ejemplo b\u00e1sico para mostrarte c\u00f3mo crear un formulario controlado en React. Dependiendo de tus necesidades espec\u00edficas, puedes agregar validaci\u00f3n de entrada, campos adicionales, integraci\u00f3n con librer\u00edas de UI, entre otras cosas. \u00a1Espero que esta introducci\u00f3n te ayude a empezar a trabajar con formularios en React!M\u00e1s Informaciones\n\nPor supuesto, profundicemos un poco m\u00e1s en la creaci\u00f3n de formularios en React y exploremos algunas t\u00e9cnicas adicionales que pueden resultar \u00fatiles en el desarrollo de aplicaciones web m\u00e1s complejas.Validaci\u00f3n de Entrada:La validaci\u00f3n de entrada es crucial para garantizar que los datos ingresados por el usuario cumplan con ciertos criterios antes de enviar el formulario. Puedes implementar la validaci\u00f3n de entrada utilizando condiciones l\u00f3gicas en los manejadores de eventos onChange, o puedes optar por bibliotecas de validaci\u00f3n de formularios como Formik o React Hook Form.Ejemplo de validaci\u00f3n b\u00e1sica utilizando condiciones l\u00f3gicas:jsxCopy codeconst handleNombreChange = (event) => {\n const value = event.target.value;\n \/\/ Validaci\u00f3n: nombre debe tener al menos 3 caracteres\n if (value.length >= 3) {\n setNombre(value);\n }\n};\nManejo de Estado con Formik:Formik es una biblioteca popular en la comunidad de React que simplifica el manejo de formularios y la validaci\u00f3n de entrada. Proporciona un enfoque m\u00e1s estructurado y declarativo para trabajar con formularios en React, eliminando la necesidad de administrar manualmente el estado y los eventos del formulario.Ejemplo de uso de Formik:jsxCopy codeimport { Formik, Form, Field, ErrorMessage } from 'formik';\n\nfunction Formulario() {\n return (\n {\n \/\/ Aqu\u00ed puedes manejar el env\u00edo del formulario\n console.log('Formulario enviado:', values);\n }}\n validate={(values) => {\n const errors = {};\n \/\/ Validaci\u00f3n personalizada\n if (!values.nombre) {\n errors.nombre = 'Campo requerido';\n }\n \/\/ Puedes agregar m\u00e1s validaciones aqu\u00ed\n return errors;\n }}\n >\n \n \n Nombre:\n \n \n \n \n Email:\n \n \n \n Enviar\n \n \n );\n}\n\nexport default Formulario;\nUso de Componentes de UI para Formularios:Puedes mejorar la apariencia y funcionalidad de tus formularios utilizando componentes de UI de bibliotecas como Material-UI, Ant Design o Bootstrap. Estas bibliotecas proporcionan componentes preestilizados y funcionales que puedes integrar f\u00e1cilmente en tus aplicaciones React.Ejemplo utilizando Material-UI:jsxCopy codeimport { TextField, Button, Grid } from '@material-ui\/core';\n\nfunction Formulario() {\n return (\n \n \n \n \n \n \n \n \n \n \n Enviar\n \n \n \n \n );\n}\nIntegraci\u00f3n con Servidores y API:Cuando el usuario env\u00eda un formulario, es com\u00fan que desees enviar esos datos al servidor para su procesamiento adicional o almacenamiento en una base de datos. Puedes lograr esto mediante solicitudes HTTP utilizando la biblioteca Axios, Fetch API o las funciones integradas de React, como fetch().Ejemplo de env\u00edo de datos a un servidor utilizando Axios:jsxCopy codeimport axios from 'axios';\n\nconst handleSubmit = async (event) => {\n event.preventDefault();\n try {\n const response = await axios.post('URL_DEL_SERVIDOR', { nombre, email });\n console.log('Respuesta del servidor:', response.data);\n \/\/ Aqu\u00ed puedes manejar la respuesta del servidor\n } catch (error) {\n console.error('Error al enviar el formulario:', error);\n }\n};\nEstas son solo algunas de las t\u00e9cnicas que puedes utilizar para mejorar y ampliar tus habilidades en la creaci\u00f3n de formularios en React. Dependiendo de los requisitos espec\u00edficos de tu aplicaci\u00f3n, puedes explorar m\u00e1s opciones y personalizar tu enfoque para adaptarse mejor a tus necesidades. \u00a1Espero que esta informaci\u00f3n adicional sea \u00fatil para ti! Si tienes m\u00e1s preguntas o necesitas m\u00e1s detalles sobre alg\u00fan aspecto espec\u00edfico, no dudes en preguntar.","publisher":{"@id":"#Publisher","@type":"Organization","name":"Revista Completa","logo":{"@type":"ImageObject","url":"https:\/\/revistacompleta.com\/wp-content\/uploads\/2023\/12\/revista-completa-high-resolution-logo-transparent.png"},"sameAs":["https:\/\/www.facebook.com\/larevistacompleta\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/revistacompleta.com\/guia-para-formularios-en-react\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"admin","url":"https:\/\/revistacompleta.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/revistacompleta.com\/wp-content\/uploads\/2023\/12\/revista-completa-high-resolution-logo.png","width":2000,"height":1500}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Gu%C3%ADa%20para%20Formularios%20en%20React&url=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/guia-para-formularios-en-react/&title=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/guia-para-formularios-en-react/&name=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/guia-para-formularios-en-react/&description=Gu%C3%ADa%20para%20Formularios%20en%20React&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/guia-para-formularios-en-react/&title=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="https://vk.com/share.php?url=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">VKontakte</span> </a> <a href="mailto:?subject=Gu%C3%ADa%20para%20Formularios%20en%20React&body=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Compartir por correo electrónico" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Compartir por correo electrónico</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div class="stream-item stream-item-below-post-comments"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </div><!-- .post-components /--> </div><!-- .main-content --> </div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © Derechos de Autor 2024, Todos los Derechos Reservados  |  <span style="color:red;" class="tie-icon-heart"></span>  |  <a href="https://revistacompleta.com/about-us/">Acerca de Nosotros</a>  |  <a href="https://revistacompleta.com/contact-us/">Contáctanos</a>  |  <a href="https://revistacompleta.com/report/">Reportar</a>  |  <a href="https://revistacompleta.com/terms-and-conditions/">Términos y Condiciones</a>  |  <a href="https://revistacompleta.com/privacy-policy/">Política de Privacidad</a>  |  <a href="https://revistacompleta.com/faq/">Preguntas Frecuentes (FAQ)</a>  |  <a href="https://revistacompleta.com/disclaimer/">Aviso Legal</a> </footer> </div><div class="copyright-text copyright-text-second"><footer> <strong>🌐 Explore Our Websites:</strong>  |  <a href="https://mwade3.com/" target="_blank">📖 مواضيع (AR)</a>  |  <a href="https://revistacompleta.com/" target="_blank">📚 La Revista Completa (ES)</a>  |  <a href="https://lasujets.com/" target="_blank">📰 Lasujets (FR)</a>  |  <a href="https://meukultura.com/" target="_blank">🎨 MEU Kultura (PT)</a>  |  <a href="https://freesourcelibrary.com/" target="_blank">📂 Free Source Library (EN)</a>  |  <a href="https://lovewithrecipes.com/" target="_blank">🍴 Love with Recipes (EN)</a>  |  <a href="https://it-solutions.center/" target="_blank">💻 IT Solutions Center (AR)</a> </footer></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/larevistacompleta/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Gu%C3%ADa%20para%20Formularios%20en%20React&url=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/guia-para-formularios-en-react/&title=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/guia-para-formularios-en-react/&name=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/guia-para-formularios-en-react/&description=Gu%C3%ADa%20para%20Formularios%20en%20React&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/guia-para-formularios-en-react/&title=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://revistacompleta.com/guia-para-formularios-en-react/&redirect_uri=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://revistacompleta.com/guia-para-formularios-en-react/&redirect_uri=https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Gu%C3%ADa%20para%20Formularios%20en%20React%20https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://revistacompleta.com/guia-para-formularios-en-react/&text=Gu%C3%ADa%20para%20Formularios%20en%20React" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Gu%C3%ADa%20para%20Formularios%20en%20React%20https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Gu%C3%ADa%20para%20Formularios%20en%20React%20https://revistacompleta.com/guia-para-formularios-en-react/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Botón volver arriba</span> </a> </div><!-- #tie-wrapper /--> <aside class=" side-aside normal-side dark-skin dark-widgetized-area appear-from-left" aria-label="Barra lateral Secundaria" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">Cerrar</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://revistacompleta.com/"> <label> <span class="screen-reader-text">Buscar:</span> <input type="search" class="search-field" placeholder="Buscar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Buscar" /> </form> </div><!-- #mobile-search /--> <div id="mobile-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/larevistacompleta/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- #mobile-social-icons /--> </div><!-- #mobile-container /--> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <style> .copy-tooltip { position: absolute; background-color: green; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 14px; font-family: Arial, sans-serif; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); display: none; z-index: 9999; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(-10px); } .copy-tooltip.show { opacity: 1; transform: translateY(0); } </style> <div class="copy-tooltip" id="copyTooltip"></div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { var tooltip = document.getElementById('copyTooltip'); function showTooltip(e, message) { tooltip.innerHTML = message; tooltip.style.left = e.pageX + 20 + 'px'; tooltip.style.top = e.pageY + 20 + 'px'; tooltip.classList.add('show'); tooltip.style.display = 'block'; setTimeout(function() { tooltip.classList.remove('show'); setTimeout(function() { tooltip.style.display = 'none'; }, 300); }, 3000); // Tooltip will disappear after 3 seconds } document.addEventListener('copy', function (e) { e.preventDefault(); var pageUrl = window.location.href; e.clipboardData.setData('text/plain', pageUrl); showTooltip(e, 'Utilice los botones para compartir.'); }); document.addEventListener('keydown', function (e) { if (e.ctrlKey && (e.key === 'c' || e.key === 'C')) { e.preventDefault(); var pageUrl = window.location.href; navigator.clipboard.writeText(pageUrl); showTooltip(e, 'Utilice los botones para compartir.'); } }); document.addEventListener('contextmenu', function (e) { e.preventDefault(); showTooltip(e, 'El clic derecho está deshabilitado.'); }); }); </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Preferencias de consentimiento" style="background-color:#0056a7"> <button class="cky-btn-revisit" aria-label="Preferencias de consentimiento"> <img src="https://revistacompleta.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4;color:#212121"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#212121">Valoramos tu privacidad</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>Utilizamos cookies para mejorar tu experiencia de navegación, ofrecer anuncios o contenido personalizado y analizar nuestro tráfico. Al hacer clic en 'Aceptar Todo', aceptas nuestro uso de cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Personalizar" data-cky-tag="settings-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Personalizar</button> <button class="cky-btn cky-btn-reject" aria-label="Rechazar Todo" data-cky-tag="reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Rechazar Todo</button> <button class="cky-btn cky-btn-accept" aria-label="Aceptar Todo" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#1863dc;border-color:#1863dc">Aceptar Todo</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#212121">Personalizar Preferencias de Consentimiento</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://revistacompleta.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>Utilizamos cookies para ayudarte a navegar eficientemente y realizar funciones específicas. Encontrarás información detallada sobre todas las cookies en cada categoría de consentimiento a continuación.</p> <p>Las cookies categorizadas como 'Necesarias' se almacenan en tu navegador ya que son esenciales para habilitar las funcionalidades básicas del sitio.</p> <p>También utilizamos cookies de terceros que nos ayudan a analizar cómo utilizas este sitio web, almacenar tus preferencias y proporcionar contenido y anuncios relevantes para ti. Estas cookies solo se almacenarán en tu navegador con tu consentimiento previo.</p> <p>Puedes elegir habilitar o deshabilitar algunas o todas estas cookies, pero desactivar algunas de ellas puede afectar tu experiencia de navegación.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#212121">Necessary</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#212121">Functional</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#212121">Analytics</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#212121">Performance</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#212121">Advertisement</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="Rechazar Todo" data-cky-tag="detail-reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Rechazar Todo </button> <button class="cky-btn cky-btn-preferences" aria-label="Guardar mis preferencias" data-cky-tag="detail-save-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Guardar mis preferencias </button> <button class="cky-btn cky-btn-accept" aria-label="Aceptar Todo" data-cky-tag="detail-accept-button" style="color:#ffffff;background-color:#1863dc;border-color:#1863dc"> Aceptar Todo </button> </div></div></div></div></script> <script> function _katexRender(rootElement) { const eles = rootElement.querySelectorAll(".katex-eq:not(.katex-rendered)"); for(let idx=0; idx < eles.length; idx++) { const ele = eles[idx]; ele.classList.add("katex-rendered"); try { katex.render( ele.textContent, ele, { displayMode: ele.getAttribute("data-katex-display") === 'true', throwOnError: false } ); } catch(n) { ele.style.color="red"; ele.textContent = n.message; } } } function katexRender() { _katexRender(document); } document.addEventListener("DOMContentLoaded", function() { katexRender(); // Perform a KaTeX rendering step when the DOM is mutated. const katexObserver = new MutationObserver(function(mutations) { [].forEach.call(mutations, function(mutation) { if (mutation.target && mutation.target instanceof Element) { _katexRender(mutation.target); } }); }); const katexObservationConfig = { subtree: true, childList: true, attributes: true, characterData: true }; katexObserver.observe(document.body, katexObservationConfig); }); </script> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//all2.atico-jo.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '4']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Cerrar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Buscar"> <form method="get" class="tie-popup-search-form" action="https://revistacompleta.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Buscar por" autocomplete="off" placeholder="Teclea y pulsa Enter" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Buscar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Cerrar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Buscar"> <form method="get" class="tie-popup-search-form" action="https://revistacompleta.com/"> <input class="tie-popup-search-input is-ajax-search" inputmode="search" type="text" name="s" title="Buscar por" autocomplete="off" placeholder="Buscar por" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Buscar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.7.1" id="katex-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"","ajaxurl":"https:\/\/revistacompleta.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"","lazyload":"","select_share":"true","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"1","lang_no_results":"Sin resultados","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2" id="tie-scripts-js"></script> <script type="text/javascript" id="tie-scripts-js-after"> /* <![CDATA[ */ jQuery.ajax({ type : "GET", url : "https://revistacompleta.com/wp-admin/admin-ajax.php", data : "postviews_id=35051&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/live-search.js?ver=7.0.2" id="tie-js-livesearch-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2" id="tie-js-single-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/mystickyelements/js/jquery.cookie.js?ver=2.2.3" id="mystickyelements-cookie-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/mystickyelements/js/mailcheck.js?ver=2.2.3" id="mailcheck-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/mystickyelements/js/jquery.email-autocomplete.js?ver=2.2.3" id="autocomplete-email-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="mystickyelements-fronted-js-js-extra"> /* <![CDATA[ */ var mystickyelements = {"ajaxurl":"https:\/\/revistacompleta.com\/wp-admin\/admin-ajax.php","ajax_nonce":"35514c0c0d"}; /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/mystickyelements/js/mystickyelements-fronted.min.js?ver=2.2.3" id="mystickyelements-fronted-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="intl-tel-input-js-js-extra"> /* <![CDATA[ */ var mystickyelement_obj = {"plugin_url":"https:\/\/revistacompleta.com\/wp-content\/plugins\/mystickyelements\/"}; /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/mystickyelements/intl-tel-input-src/build/js/intlTelInput.js?ver=2.2.3" id="intl-tel-input-js-js" defer="defer" data-wp-strategy="defer"></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> <div class="mystickyelements-fixed mystickyelements-position-left mystickyelements-position-screen-center mystickyelements-position-mobile-left mystickyelements-on-hover mystickyelements-size-medium mystickyelements-mobile-size-medium mystickyelements-entry-effect-slide-in mystickyelements-templates-default"> <div class="mystickyelement-lists-wrap"> <ul class="mystickyelements-lists mysticky"> <li class="mystickyelements-minimize "> <span class="mystickyelements-minimize minimize-position-left minimize-position-mobile-left" style="background: #000000" > ← </span> </li> <li id="mystickyelements-social-facebook" class="mystickyelements-social-icon-li mystickyelements-social-facebook element-desktop-on element-mobile-on"> <style> </style> <span class="mystickyelements-social-icon social-facebook social-custom" data-tab-setting = 'hover' data-click = "0"data-mobile-behavior="disable" data-flyout="disable" style="background: #4267B2" > <a class="social-link-facebook" href="https://www.facebook.com/larevistacompleta" target="_blank" rel="noopener nofollow" data-url="https://www.facebook.com/larevistacompleta" data-tab-setting = 'hover' data-mobile-behavior="disable" data-flyout="disable" title="Facebook"> <i class="fab fa-facebook-f" ></i> </a> </span> <span class="mystickyelements-social-text " style= "background: #4267B2;" > <a class="social-link-facebook" href="https://www.facebook.com/larevistacompleta" target="_blank" rel="noopener nofollow" data-tab-setting = 'hover' data-flyout="disable" title="Facebook" data-url="https://www.facebook.com/larevistacompleta" > Facebook </a> </span> </li> </ul> </div> </div> </body> </html><!-- WP Fastest Cache file was created in 0.4275209903717 seconds, on 24-12-24 5:36:49 --><!-- via php --><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="7ea2a247632a92c8bf2783bd-|49" defer></script>