Formularios y eventos de React
En este capítulo discutiremos cómo usar formularios en React.
Los elementos de formulario HTML son diferentes de otros elementos DOM en React, porque los elementos de formulario conservan por naturaleza algún estado interno.
En HTML, los elementos de formulario como <input>, <textarea> y <select> mantienen su propio estado y se actualizan según la entrada del usuario. Pero en React, el estado mutable generalmente se guarda en la propiedad de estado del componente y solo se puede actualizar con el método setState().
Un ejemplo sencillo
En el ejemplo configuramos el valor del campo de entrada inputvalue = {this.state.data}. Cuando el valor del campo de entrada cambia, podemos actualizar el state. Podemos usaronChangeeventos para escuchar los cambios de input y modificar el state.
Ejemplo de React
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello Ejemplo!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Pruébalo »
El código anterior renderizará un elemento input con el valor Hello Ejemplo! y actualizará el valor ingresado por el usuario en respuesta al evento onChange.
Ejemplo 2
En el siguiente ejemplo demostraremos cómo usar formularios en componentes secundarios.onChangeEl método activará la actualización del state y pasará el valor actualizado al campo de entrada del componente hijovaluepara volver a renderizar la interfaz.
Debes crear un manejador de eventos en el componente padre (handleChange) y como prop (updateStateProp) pasarlo a tu componente hijo. Ejemplo a continuación:
Ejemplo de React
class Content extends React.Component {
render() {
return (
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>
);
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = { value: 'Hello Ejemplo!' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
var value = this.state.value;
return (
<div>
<Content myDataProp={value} updateStateProp={this.handleChange} />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloMessage />);
Pruébalo »
Menú desplegable Select
En React, no se usa el atributo selected; en su lugar, se usa el atributo value en la etiqueta select raíz para indicar el elemento seleccionado.
Ejemplo de React
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Seleccione su sitio web favorito
<select value={this.state.value} onChange={this.handleChange}>
<option value="gg">Google</option>
<option value="rn">Ejemplo</option>
<option value="tb">Taobao</option>
<option value="fb">Facebook</option>
</select>
</label>
<input type="submit" value="Enviar" />
</form>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<FlavorForm />
);
Pruébalo »
Múltiples formularios
Cuando tengas que manejar múltiples elementos input, puedes agregar un atributo name a cada elemento para que la función de manejo, según elevent.target.namevalor, elija qué hacer.
Ejemplo de React
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
¿Salir?:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Número de visitantes:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
Pruébalo »
Eventos de React
El siguiente ejemplo demuestra cómo modificar datos mediante el evento onClick:
Ejemplo de React
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello Ejemplo!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Ejemplo'})
}
render() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>Haz clic aquí</button>
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Pruébalo »
Cuando necesites actualizar el state del componente padre desde el componente hijo,statedebes crear un manejador de eventos en el componente padre (handleChange) y como prop (updateStateProp) pasarlo a tu componente hijo. Ejemplo a continuación:
Ejemplo de React
class Content extends React.Component {
render() {
return <div>
<button onClick = {this.props.updateStateProp}>Haz clic aquí</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello Ejemplo!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'Ejemplo'})
}
render() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
Pruébalo »
Otras extensiones