Formularios

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

Agregar formularios en React

Agrega un formulario con React como cualquier otro elemento:


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

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 esto generalmente 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 tiene que ver con cómo se manejan los datos cuando cambian de valor o se envían.


En HTML, los datos del formulario generalmente se manejan mediante el DOM.


En React, los datos del formulario generalmente son manejados por los componentes.


Cuando los componentes manejan los datos, todos ellos se almacenan en el estado del componente.


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


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


Consulta la sección React Hooks para obtener más información sobre los 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 />);


Envío de formularios

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

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 />);


Campos de entrada múltiples

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();
    alert(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: utilizamos 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 textarea en React es ligeramente diferente del HTML normal.


En HTML, el valor de un área de texto era el texto entre la etiqueta de inicio <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 useStateHook para administrar el valor del área de texto:

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:


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

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>
  )
}

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




oi

Comentarios

Publicar un comentario

Entradas populares de este blog

1-react-intro

React es una biblioteca JavaScript para construir interfaces de usuario. React se utiliza para construir aplicaciones de una sola página. React nos permite crear componentes de interfaz de usuario reutilizables. Es una libreria de javascript para crear interfaces de usuarios en una sola pagina index.html  Estructura react: import React from 'react' ; import ReactDOM from 'react-dom/client' ; function Hello ( props ) { return < h1 > Hello World! </ h1 > ; } const container = document . getElementById ( "root" ) ; const root = ReactDOM . createRoot ( container ) ; root . render ( < Hello /> ) ;   Crear aplicación de reacción Para aprender y probar React, debe configurar un entorno de reacción sobre tu computadora. Este tutorial utiliza la create-react-app. El create-react-app herramienta es una forma de apoyar oficialmente para crear aplicaciones de React. Node.js está obligado a utilizar create-react-app . Abra su term...
Leer más

condicional

En React, puedes renderizar componentes de forma condicional. Hay varias maneras de hacer esto. ifDeclaración Podemos utilizar el ifoperador JavaScript para decidir qué componente renderizar. Utilizaremos estos dos componentes: function MissedGoal ( ) { return < h1 > MISSED! </ h1 > ; } function MadeGoal ( ) { return < h1 > Goal! </ h1 > ; } Ejemplo: Ahora, crearemos otro componente que elige qué componente renderizar según una condición: function Goal ( props ) { const isGoal = props . isGoal ; if ( isGoal ) { return < MadeGoal /> ; } return < MissedGoal /> ; } const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; root . render ( < Goal isGoal = { false } /> ) ; dfsdf Intente cambiar el isGoalatributo a true: const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; root . render ( < Goal isGoal = { true } /> ) ; &&Op...
Leer más

useState

Imagen
En React, el estado es mucho más que solo un conjunto de datos; es la "memoria" interna del componente, que le permite " recordar " información y reaccionar a los cambios de forma automática. Veamos más en profundidad por qué es necesario rastrear el estado y cómo funciona. ¿Por qué es necesario rastrear el estado en un componente? Rastrear el estado en un componente es esencial porque nos permite que el componente sea dinámico y reactivo . Esto significa que el componente puede actualizar su interfaz en respuesta a cambios internos o externos sin tener que rehacerse completamente o actualizarse de forma manual.  Veamos algunos puntos clave: 1.-Mantener la interfaz actualizada: Cuando el estado cambia, React vuelve a "pintar" (renderizar) solo aquellas partes de la interfaz que dependen de ese estado. Esto es importante para crear aplicaciones interactivas donde los datos pueden cambiar con las acciones del usuario, como al hacer clic en botones, esc...
Leer más