Introdução aos formulários no React

Como sabemos que os formulários são uma parte importante de um aplicativo da Web, é necessário ter conhecimento sobre o design de formulários para reagir. Neste artigo, veremos quais são os diferentes tipos de formulários disponíveis no React, sua sintaxe e alguns exemplos relacionados aos formulários do React.

Aqui está uma sintaxe básica de formas de reação,

Sintaxe:

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:


);
)
)

A sintaxe acima mostra como um formulário é criado para reagir. Isso exigirá a criação de uma classe que estenda o React. O componente e o método de renderização terão uma tag de formulário. Como podemos ver, o render contém uma tag de formulário na qual temos um rótulo para mostrar o texto seguido pela tag do tipo de entrada semelhante ao HTML. Aqui nós especificamos enviar eventos e alterar eventos no botão e no texto, respectivamente.

Tipos de formulários no React

Basicamente, existem dois tipos de formas em reagir. Eles são,

1. Entrada controlada

Um formulário de reação é considerado controlado quando um componente de reação responsável pela renderização também está controlando o comportamento do formulário nas entradas subsequentes. Isso significa que sempre que os valores informam alterações, o componente salva o valor alterado em seu estado. Vejamos um exemplo,

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;

No exemplo acima, sempre que o valor do nome de usuário é alterado, o manipulador de eventos de alteração é chamado e seu valor atualizado é salvo no estado. Portanto, o formulário controlado pode ser usado para aplicar validações, desativar um botão até que um campo de texto contenha algum texto, etc.

2. Formulários não controlados

Formulários não controlados são semelhantes aos formulários HTML. Isso não faz uso de nenhum ouvinte. Isso é necessário para obter o valor do campo no tempo necessário, por exemplo, no clique de um botão. O valor necessário é lido usando uma referência associada aos elementos do formulário. É assim que a referência é definida,

Código:



"Valueref" usado acima é usado para ler o valor do campo como,

this.refs.valueref.value

A partir da discussão acima, temos um entendimento claro de formas controladas e não controladas para reagir.

Exemplos de formulários no React

Abaixo são mencionados alguns exemplos

Exemplo 1

Para começar, usaremos um campo de texto simples em nosso formulário. Aqui está um código que mostra um campo de texto para inserir um nome de usuário.

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 insira seu nome de usuário:


type = "text"
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Resultado:

Exemplo 2

Agora, abordaremos outro exemplo, mostrando como um campo de texto é usado com um botão de envio e como lidar com eventos relacionados ao clique de um botão. O código abaixo tem,

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)

Digite seu nome de usuário e clique em enviar:


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

Resultado:

Quando o nome do usuário é inserido, os ouvintes serão acionados e o cabeçalho mudará dinamicamente.

Depois de clicar no botão enviar, o evento de envio será acionado e um alerta será exibido como o anexo abaixo,

Exemplo 3

Neste exemplo, veremos como vários campos são usados ​​em um formulário. Aqui temos dois campos para inserir firstName e lastName. Usamos um manipulador de eventos de alteração para alterar dinamicamente o conteúdo de um texto com uma alteração em seus respectivos valores.

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)

Introduza o primeiro nome:


type = 'text'
name = 'firstName'
onChange = (this.changeEventHandler)
/>

Insira o último nome:

type = 'text'
name = 'lastName'
onChange = (this.changeEventHandler)
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

A saída abaixo anexada mostra dois campos de texto para inserir o nome e o sobrenome. Com a alteração no conteúdo do nome e sobrenome, o cabeçalho colocado acima é alterado.

Resultado:

Conclusão

Na discussão acima, temos uma compreensão clara das formas de reação. Além dos exemplos acima, podemos fornecer mais personalizações para formulários conforme nossas necessidades. O formulário é um componente de reação importante e deve ser reutilizado.

Artigos recomendados

Este é um guia para o Forms in React. Aqui discutimos a introdução e os tipos de formulários em reação, juntamente com seus exemplos e implementação de código. Você também pode consultar os seguintes artigos para saber mais:

  1. Diferença entre ReactJS e Angular2
  2. Os 5 melhores frameworks Javascript
  3. Perguntas da entrevista do WinForms (básica, avançada)
  4. React Native vs React
  5. Guia para diferentes eventos JavaScript

Categoria:

Desenvolvimento de software