formularios de reacción
Al igual que en HTML, React usa formularios para permitir que los usuarios interactúen con la página web.
Agregar formularios en React
Agregas un formulario con React como cualquier otro elemento:
Ejemplo:
Agregue un formulario que permita a los usuarios ingresar su nombre:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
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 se trata de cómo maneja los datos cuando cambia de valor o se envía.
En HTML, los datos del formulario generalmente son manejados por 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 useStateHook para realizar un seguimiento de cada valor de entrada y proporcionar una "fuente única de verdad" para toda la aplicación.
Consulte la sección React Hooks para obtener más información sobre los Hooks.
Ejemplo:
Use el onChangegancho para administrar la entrada:
import { useState } from "react";
import ReactDOM from 'react-dom';
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>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
¡Obtener la certificación!
$95 INSCRÍBETE
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';
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>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
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, use la
sintaxis event.target.namey
.event.target.value
Para actualizar el estado, use corchetes [notación de corchetes] alrededor del nombre de la propiedad.
Ejemplo:
Escriba un formulario con dos campos de entrada:
import { useState } from "react";
import ReactDOM from "react-dom";
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>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
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 brinda 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 ordinario.
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 useStategancho 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";
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>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Seleccione
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:
HTML:
<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:
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 hacer estos ligeros cambios en <textarea>y <select>, React puede manejar todos los elementos de entrada de la misma manera.