Introducción a los formularios en React

Como sabemos que los formularios son una parte importante de una aplicación web, por lo tanto, es necesario tener conocimiento sobre el diseño de formularios en reacción. En este artículo, veremos cuáles son los diferentes tipos de formularios disponibles en react, su sintaxis y algunos ejemplos relacionados con los formularios de reacción.

Aquí hay una sintaxis básica de formas de reacción,

Sintaxis:

class FormClassName extends React.Component (
constructor(props) (
super(props);
// handle initialization activities
)
handleChangeEvents(event) (
//handle change events
)
handleSubmitevents(event) (
// handle submit events
)
render() (
return (

Name:


);
)
)

La sintaxis anterior muestra cómo se crea un formulario para reaccionar. Será necesario crear una clase que extienda React. El componente y el método de representación tendrán una etiqueta de formulario. Como podemos ver, render contiene una etiqueta de formulario dentro de la cual tenemos una etiqueta para mostrar texto seguido de una etiqueta de tipo de entrada similar a HTML. Aquí hemos especificado enviar eventos y cambiar eventos en botón y texto respectivamente.

Tipos de formularios en reacción

Básicamente hay dos tipos de formas en reaccionar. Son,

1. Entrada controlada

Se considera que una forma de reacción está controlada cuando un componente de reacción responsable de la representación también controla el comportamiento de la forma en las entradas posteriores. Eso significa que cada vez que los valores informan cambios, el componente guarda el valor cambiado en su estado. Veamos un ejemplo,

Código:

import React, ( Component ) from 'react';
class ControlledForm extends Component (
constructor () (
this.state = (
username: ''
)
)
changeEventHandler = event => (
this.setState((
username: event.target.value
));
)
render () (
return (
name="username"
value=(this.state.username)
onChange=(this.changeEventHandler)
/>
);
)
)
export default ControlledForm;

En el ejemplo anterior, cada vez que cambia el valor del nombre de usuario, se llama al controlador de eventos de cambio y su valor actualizado se guarda en estado. Por lo tanto, la forma controlada se puede usar para aplicar validaciones, deshabilitar un botón hasta que un campo de texto contenga algo de texto, etc.

2. Formas incontroladas

Los formularios no controlados son similares a los formularios HTML. Esto no hace uso de ningún oyente. Esto requiere obtener el valor del campo en el momento requerido, por ejemplo, al hacer clic en un botón. El valor requerido se lee utilizando una referencia asociada con los elementos del formulario. Así es como se define la referencia,

Código:



"Valueref" usado anteriormente se usa para leer el valor del campo como,

this.refs.valueref.value

De la discusión anterior, tenemos una comprensión clara de las formas controladas y no controladas para reaccionar.

Ejemplos de formularios en reacción

A continuación se mencionan algunos ejemplos.

Ejemplo 1

Para comenzar, utilizaremos un campo de texto simple en nuestro formulario. Aquí hay un código que muestra un campo de texto para ingresar un nombre de usuario.

Código:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

Por favor, ingrese su nombre de usuario:

tipo = "texto"
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Salida:

Ejemplo # 2

Ahora veremos otro ejemplo que muestra cómo se usa un campo de texto con un botón de envío y cómo manejar eventos relacionados con el clic de un botón. El siguiente código tiene,

Código:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

Ingrese su nombre de usuario y haga clic en enviar:


tipo = 'texto'
onChange = (this.changeEventHandler)
/>
tipo = 'enviar'
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Salida:

Cuando se ingresa el nombre de usuario, los oyentes se activarán y el encabezado cambiará dinámicamente.

Después de hacer clic en el botón de envío, se activará el evento de envío y se mostrará una alerta como la que se adjunta a continuación,

Ejemplo # 3

En este ejemplo, veremos cómo se usan múltiples campos en un formulario. Aquí tenemos dos campos para ingresar firstName y lastName. Hemos utilizado un controlador de eventos de cambio para cambiar dinámicamente el contenido de un texto con un cambio en sus valores respectivos.

Código:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

Ingrese el nombre:


tipo = 'texto'
nombre = 'nombre'
onChange = (this.changeEventHandler)
/>

Introduzca el apellido:

tipo = 'texto'
nombre = 'apellido'
onChange = (this.changeEventHandler)
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

La salida adjunta a continuación muestra dos campos de texto para ingresar el nombre y el apellido. Con el cambio en el contenido del nombre y apellido, se cambia el encabezado colocado arriba.

Salida:

Conclusión

En la discusión anterior, tenemos una comprensión clara de las formas de reacción. Además de los ejemplos anteriores, podemos proporcionar más personalizaciones a los formularios según nuestras necesidades. La forma es un componente de reacción importante y está destinada a ser reutilizable.

Artículos recomendados

Esta es una guía de Forms in React. Aquí discutimos la introducción y los tipos de formularios en reaccion junto con sus ejemplos y la implementación del código. También puede consultar los siguientes artículos para obtener más información.

  1. Diferencia entre ReactJS y Angular2
  2. Los 5 mejores marcos de Javascript
  3. Preguntas de la entrevista de WinForms (básica, avanzada)
  4. Reaccionar nativo vs reaccionar
  5. Guía de diferentes eventos de JavaScript

Categoría:

Desarrollo de software