Reaccionar formularios

 Al igual que en HTML, React utiliza formularios para permitir a los usuarios interactuar con la página web.

Agregar formularios en React

Agregas un formulario con React como cualquier otro elemento:


Agregue un formulario que permita a los usuarios ingresar su nombre:

import React from 'react';

import ReactDOM from 'react-dom/client';


function MyForm() {

  return (

    <form>

      <label>Enter your name:

        <input type="text" />

      </label>

    </form>

  )

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);

Esto funcionará normalmente, el formulario se enviará y la página se actualizará. Pero generalmente esto no es lo que queremos que suceda en React. Queremos evitar este comportamiento predeterminado y dejar que React controle el formulario.

Manejo de formularios

El manejo de formularios se trata de cómo maneja los datos cuando cambian de valor o se envían. En HTML, los datos del formulario normalmente los maneja el DOM. En React, los datos del formulario generalmente son manejados por los componentes. Cuando los datos son manejados por los componentes, todos los datos se almacenan en el estado del componente. 

Puede controlar los cambios agregando controladores de eventos en el onChangeatributo. 

Podemos usar el useStateHook para realizar un seguimiento de cada valor de entrada y proporcionar una "única fuente de verdad" para toda la aplicación.

Consulte la sección React Hooks para obtener más información sobre Hooks.

Utilice el useStateHook para gestionar la entrada:

import { useState } from "react";
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

target:
Envío de formularios

Puede controlar la acción de envío agregando un controlador de eventos en el onSubmitatributo para <form>:

Ejemplo:
Agregue un botón de envío y un controlador de eventos en el onSubmitatributo:

import { useState } from "react";
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Múltiples campos de entrada

Puede controlar los valores de más de un campo de entrada agregando un nameatributo a cada elemento.

Inicializaremos nuestro estado con un objeto vacío.

Para acceder a los campos en el controlador de eventos, utilice la sintaxis event.target.namey event.target.value.

Para actualizar el estado, utilice corchetes [notación de corchetes] alrededor del nombre de la propiedad.

Escriba un formulario con dos campos de entrada:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Nota: Usamos la misma función de controlador de eventos para ambos campos de entrada, podríamos escribir un controlador de eventos para cada uno, pero esto nos da un código mucho más limpio y es la forma preferida en React.

área de texto

El elemento de área de texto en React es ligeramente diferente del HTML normal.

En HTML, el valor de un área de texto era el texto entre la etiqueta inicial <textarea> y la etiqueta final </textarea>.

<textarea>
  Content of the textarea.
</textarea>

En React, el valor de un área de texto se coloca en un atributo de valor. Usaremos el useStateHook para administrar el valor del área de texto:

Ejemplo:
Un área de texto simple con algo de contenido:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function MyForm() {
  const [textarea, setTextarea] = useState(
    "The content of a textarea goes in the value attribute"
  );

  const handleChange = (event) => {
    setTextarea(event.target.value)
  }

  return (
    <form>
      <textarea value={textarea} onChange={handleChange} />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Seleccionar


Una lista desplegable, o un cuadro de selección, en React también es un poco diferente de HTML.
en HTML, el valor seleccionado en la lista desplegable se definió con el selectedatributo:

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

En React, el valor seleccionado se define con un value atributo en la selectetiqueta:

Ejemplo:
Un cuadro de selección simple, donde el valor seleccionado "Volvo" se inicializa en el constructor:


import { useState } from "react";
import ReactDOM from "react-dom/client";

function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");

  const handleChange = (event) => {
    setMyCar(event.target.value)
  }

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Al realizar estos pequeños cambios en <textarea>y <select>, React puede manejar todos los elementos de entrada de la misma manera.





Comentarios

Publicar un comentario

Entradas populares de este blog

API Web Crypto,

 I have digital signature certificates efirma de sat mexico. I want an app to load the .key certificate and convert it to pem format. Once you convert it, display it in a textarea using the Web Crypto API. Tengo certificados de firma digital efirma de sat mexico. Quiero una aplicación que cargue el certificado .key y lo convierta a formato pem. Una vez que lo convierta, lo muestre en un área de texto utilizando la API Web Crypto. ChatGPT Plus ChatGPT To convert a .key certificate to PEM format using the Web Crypto API, you can use the following steps: Load the .key certificate file using the FileReader API. Here's an example code snippet to achieve that: javascript Copiar código const fileInput = document . querySelector ( 'input[type="file"]' ); const reader = new FileReader (); reader. onload = () => { const keyData = reader. result ; // Code to convert the key data to PEM format }; reader. readAsText (fileInput. files [ 0 ]); Convert the key dat...
Leer más

React Events

 Reaccionar eventos Al igual que los eventos HTML DOM, React puede realizar acciones basadas en eventos del usuario.React tiene los mismos eventos que HTML: hacer clic, cambiar, pasar el mouse, etc. Agregar eventos Los eventos de React están escritos en la sintaxis de camelCase: onClick en lugar de onclick . Los controladores de eventos de React están escritos entre llaves: onClick={shoot} en lugar de onclick="shoot()" . React: <button onClick={shoot}>Take the Shot!</button> Html: <button onclick="shoot()">Take the Shot!</button> Coloque la shootfunción dentro del Footballcomponente: function Football() {   const shoot = () => {     alert("Great Shot!");   }   return (     <button onClick={shoot}>Take the shot!</button>   ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />); Pasar argumentos Para pasar un argumento a un controlador de eventos, use una...
Leer más

firmas digitales integradas en PDFs

 Para las firmas digitales integradas en PDFs, el proceso es un poco diferente al de simplemente manejar archivos y firmas por separado. Aquí te explico en detalle cómo se realiza y cómo el receptor obtiene la clave pública del firmante. Funcionamiento de las Firmas Digitales Integradas en PDFs Firmante : El firmante utiliza un software que soporta firmas digitales en PDF (como Adobe Acrobat, por ejemplo) para firmar el documento PDF. Este software inserta la firma digital en el PDF y también incluye el certificado digital del firmante dentro del archivo PDF. Receptor : El receptor abre el documento PDF utilizando un software compatible con firmas digitales (Adobe Acrobat Reader, por ejemplo). Este software extrae la firma digital y el certificado digital del firmante del PDF. Pasos Detallados Firma del Documento PDF : El documento PDF es firmado utilizando la clave privada del firmante. Se genera un hash del contenido del PDF. El hash es cifrado utilizando la clave privada del fir...
Leer más