React - Uma introdução bem básica

React - Uma introdução bem básica - XIV

Neste artigo vou apresentar uma introdução bem básica ao React.

Hoje vamos continuar a tratar formulários no React. (veja o artigo anterior aqui)

Veremos como definir elementos de formulários usando um formulário (form) e seus eventos no React.

Vamos começar com o elemento <form>. O <form> no React é renderizado como um HTML <form>, então quaisquer regras que você tenha para o formulário HTML também se aplicam ao elemento <form> do React. (Por exemplo, de acordo com as especificações do HTML5, você não deve aninhar formulários.)

O elemento <form> pode ter eventos e o React suporta três eventos para formulários além dos eventos padrão React DOM:

onChange - dispara quando há uma alteração em qualquer um dos elementos de entrada do formulário;
onInput - dispara para cada alteração nos valores do elemento <textarea> <input>. (A equipe do React não recomenda usá-lo);
onSubmit - dispara quando o formulário é enviado, geralmente pressionando Enter;

Além destes 3 eventos , o elemento <form> pode ter eventos padrão React como onKeyUp e onClick.

Usando elementos de formulário

Podemos implementar quase todos os campos de entrada em HTML com apenas quatro elementos: <input>,<textarea>, <select> e <option>.

Você se lembra que no React as propriedades são imutáveis ?

Bem, os elementos de formulário são especiais porque os usuários precisam interagir com os elementos e alterar essas propriedades. Para todos os outros elementos, isso é impossível.

Assim , o React fez esses elementos especiais, dando-lhes o valor das propriedades mutáveis, checked e selected. Essas propriedades especiais mutáveis também são chamadas de propriedades interativas.

A seguir temos uma lista das propriedades/campos interativos (os que podem ser alterados) que você pode ler de eventos como onChange anexado a elementos de formulário:

value - Aplica-se a <input>, <textarea> e <select>
checked - Aplica-se a <input> com type = "checkbox" e type = "radio"
selected - aplica-se a <otion> (usado com <select>)

Você pode ler os valores e alterá-los, trabalhando com estas propriedades interativas(mutáveis).

O elemento <Input>

O elemento <input> renderiza vários campos usando valores diferentes para seu atributo type:

 text - campo de entrada de texto simples;
 password - campo de entrada de texto com um visor mascarado (para privacidade);
 radio - botão de rádio. Use o mesmo nome para criar um grupo de botões de opção;
 checkbox - elemento da caixa de seleção. Use o mesmo nome para criar um grupo;
 button - elemento de formulário de botão;

O principal caso de uso para todos os elementos do tipo <input>, exceto caixas de seleção e botões de opção, é usar value como a propriedade interativa/variável do elemento.

Por exemplo, um campo de entrada de email pode usar o estado de email e o manipulador de eventos onChange:

<input
    type="text"
    name="email"
    value={this.state.email}
    onChange={this.handleEmailChange}/>

As duas exceções que não possuem value como atributo mutável principal são inputs com os tipos checkbox e radio.

Eles usam checked porque esses dois tipos tem um valor por elemento HTML e, portanto, o valor não muda, mas o estado de checked/selected muda.

O elemento <TextArea>

Os elementos <textarea> são usados para capturar e exibir entradas de texto longas, como notas,
posts, trechos de código e assim por diante. Em HTML normal, a tag <textarea> usa a propriedade inner HTML para o value.

No React o valor usado é attribute. Assim o React vai converter qualquer filho de <textarea> para o valor padrão, e, por este motivo é recomendável usar o valor attribute para <textarea> :

render() 
{
     return <textarea name="descricao" value={this.state.descricao}/>
}

Para acompanhar as alterações, basta usar o evento onChange como faria para os elementos <input>.

Os elementos <Select> e <Option>

Campos de seleção e opção (select e option) são ótimos para permitir que os usuários selecionem um único valor ou vários valores de uma lista pré-preenchida de valores. A lista de valores é oculta atrás do elemento até que os usuários o expandam (no caso de um seleção única).

O elemento <select> é outro elemento cujo comportamento é diferente no React quando comparado ao HTML normal. No Html normal você pode usar selectDOMNode.selectedIndex ou selectDOMNode.selectedOptions para obter o índice do elemento selecionado.

No React, para <select> você usa value :

...
constructor(props) {
   super(props)
   this.state = {selectedValue: 'node'}
}
handleSelectChange(event) {
    this.setState({selectedValue: event.target.value})
}
...
render() {
   return <form>
       <select
          value={this.state.selectedValue}
          onChange={this.handleSelectChange}>
              <option value="visual basic">Visual Basic</option>
              <option value="react">React</option>
              <option value="python">Python</option>
     </select>
</form>
}
...

Esse código renderiza um menu suspenso e pré-seleciona o valor do nó (que deve ser definido no construtor).

No geral, a definição de elementos de formulário no React não é muito diferente do que é feito no HTML normal, exceto pelo fato de você usar value com mais frequência.

Concluímos assim essa introdução básica ao React. O objetivo foi apresentar uma visão bem básica de como o React funciona.

Se você deseja ir a fundo com o React vai encontrar muito material na web.

Vou deixar a seguir um link onde você pode encontrar material gratuíto sobre React:

Confira: https://freefrontend.com/reactjs-books/

Bom estudo.

'Ora, o homem natural não compreende as coisas do Espírito de Deus, porque lhe parecem loucura; e não pode entendê-las, porque elas se discernem espiritualmente.'
1 Coríntios 2:14