Cómo manejar eventos en React con onChange
El evento onChange en React se usa para capturar cambios en los elementos de entrada (input, textarea, select). Se emplea principalmente para actualizar el estado de un componente y reflejar los cambios en tiempo real.
Uso de onChange en componentes controlados
En React, un componente controlado es aquel cuyo valor es manejado por el estado de React en lugar del DOM. Para esto, onChange se combina con useState en componentes funcionales o con this.setState en componentes de clase.
Ejemplo con useState en un componente funcional
import { useState } from "react";
function Formulario() {
const [nombre, setNombre] = useState("");
const handleChange = (event) => {
setNombre(event.target.value);
};
return (
<div>
<input type="text" value={nombre} onChange={handleChange} placeholder="Escribe tu nombre" />
<p>Nombre ingresado: {nombre}</p>
</div>
);
}Ejemplo en un componente de clase
import React, { Component } from "react";
class Formulario extends Component {
constructor(props) {
super(props);
this.state = { nombre: "" };
}
handleChange = (event) => {
this.setState({ nombre: event.target.value });
};
render() {
return (
<div>
<input type="text" value={this.state.nombre} onChange={this.handleChange} placeholder="Escribe tu nombre" />
<p>Nombre ingresado: {this.state.nombre}</p>
</div>
);
}
}Ejemplo con otros elementos
onChange en un textarea
<textarea value={mensaje} onChange={(e) => setMensaje(e.target.value)} />
onChange en un select
<select value={opcion} onChange={(e) => setOpcion(e.target.value)}>
<option value="op1">Opción 1</option>
<option value="op2">Opción 2</option>
</select>Referencia
- Sitio oficial de React: https://react.dev/
Jorge García
Fullstack developer