Mantendo estados de componentes no React com state | iMasters
Continuando a série de artigos sobre componentes com React, nesse artigo irei mostrar como trabalhar com state (estado) de um componente. Caso você tenha perdido o artigo anterior onde mostro como renderizar e criar seu primeiro componente, segue o link abaixo:
Agora que já temos a nossa lista de tarefas sendo renderizada, precisamos criar o recurso para adicionar novas.
Atualizando JSX
O primeiro passo será criar o input e button; no nosso componente. Podemos fazer isso simplesmente mudando o código da função render:
Apenas foi adicionado uma tag input e outra button.
Se você fez a alteração, deve ter notado que o componente passou a dar um erro:
Esse erro está acontecendo porque um componente em React deve retornar apenas um filho para a função render, porém, em nosso exemplo estamos retornando três, sendo eles: input, button e ul.
Para resolver o problema precisamos apenas criar um elemento para encapsular (fazer o wrap) dos demais elementos:
Adicionando uma tag div como mãe de todos os demais elementos, o problema foi resolvido, mas será que eu quero renderizar essa div no meu DOM (na minha página)? Obviamente não, né. Estou apenas sendo obrigado a utilizá-la para o meu componente conseguir retornar apenas um filho e posteriormente ser renderizado.
Sabendo dessa necessidade, a galera do React criou um componente chamado Fragment, a idéia do Fragment é realizar o mesmo papel que a div nesse exemplo, ou seja, encapsular e fazer wrap de demais elementos, porém, ele não é renderizado em nosso DOM.
Para utilizá-lo, importe-o do módulo do react:
E troque a div por ele:
Legal, agora já temos nosso componente sendo renderizado, porém, sem estilo algum (assunto para os próximos artigos):
Até o momento nosso input e button não fazem nada; precisamos agora – de alguma maneira – pegar o valor do input a cada mudança e salvá-lo em algum lugar. Como podemos fazer isso? Para resolver esse tipo de necessidade, o React criou o famoso state.
Mantendo estados
O state serve para guardarmos, atualizarmos e mantermos estados em nossos componentes. Para criá-lo basta apenas adicioná-lo como atributo da classe Tarefas:
tarefa : ""
Essa é uma maneira mais nova e recente. Em alguns exemplos você deve ver algo parecido com:
this.state = { tarefa : "" };
Cria-se um construtor em nosso componente, onde o mesmo recebe como parâmetro as propriedades do componente e chama o construtor da classe mãe através do super. No caso, a classe Component, passando as propriedades para ela.
Logo após, cria-se o state com os valores iniciais.
Fica a seu critério qual maneira mais lhe agrada. Tome cuidado apenas com compatibilidade, talvez seja necessário algum transpiler, como o Babel, por exemplo.
Nosso componente por padrão vai possuir um estado onde contém apenas uma propriedade que seria a tarefa cujo valor é branco.
Agora vamos passar o valor desse estado para nosso input:
<input type="text" value={ this.state.tarefa }/>
Dessa maneira, já fizemos a passagem de valor do componente para o template.
Precisamos agora fazer o processo inverso, ou seja, passar o valor do template para o componente. Para isso, vamos precisar utilizar a função onChange do input, onde uma função de handleChange será passada para ela:
<input onChange={ this.handleChange } type="text" value={ this.state.tarefa }/>
this.setState({ tarefa : event.target.value });
A função handleChange simplesmente recebe um event como parâmetro, onde através dele conseguimos pegar o valor atual do input. Depois chamamos a função setState do componente passando um novo estado para ele.
Se você tentou digitar algum valor no input, deve ter se deparado com um novo erro:
Isso aconteceu porque quando o input chamou a função handleChange, o escopo de execução é diferente do componente. Dessa maneira o this não é o componente, e sim o valor undefined. Para resolver o problema, uma das possíveis maneiras seria dentro do construtor do componente mudarmos o escopo da função:
Dessa maneira, estamos falando que a função handleChange será igual a uma nova função, cujo o valor seria ela mesmo, porém, com seu escopo mudado para o componente, por isso é passado o .bind(this). No caso, o this seria o próprio componente.
Um event do React, além de conseguir pegar o valor do input, também possuí outros recursos e funcionalidades; o mesmo trata-se de uma classe chamada SyntheticEvent.
A função setState, além de atualizar o estado do componente também realiza alguns novos processos no ciclo de vida do mesmo e seus filhos – ela dispara as funções: shouldComponentUpdate e render. Dessa maneira o componente é re-renderizado (desde que a função shouldComponentUpdate retorne true).
Agora precisamos criar a função do botão. A ideia será a mesma; vamos criar uma função e passá-la para o botão invocar ao ser realizado o click no mesmo:
<button onClick={ this.handleClick }>Adicionar</button>
this.setState({ tarefas : [].concat(this.state.tarefas, this.state.tarefa) });
Não se esqueça de mudar o escopo da função para o escopo do componente:
Observação: repare que foi necessário adicionar mais uma propriedade no estado do componente, sendo ela tarefas:
tarefa : "",
tarefas : []
Voltando para o componente e testando, veja que nada aconteceu, isso porque precisamos mudar de onde buscamos as tarefas a serem renderizadas. Precisamos trocar a variável local dentro da função render para o valor do nosso state:
{ this.state.tarefas.map(tarefa => <li>{ tarefa }</li>) }
Por último, precisamos adicionar um atributo chamado key para nossos arrays ou iterators. É através desse key que o React consegue saber o que precisa ser mudado em nosso código.
O atributo key não será renderizado; ele serve apenas para o React realizar o "diff", sabendo o que saiu ou entrou em nosso array, atualizando apenas aquele pedaço e não o array todo. Dessa maneira a performance fica muito melhor.
Nesse artigo mostrei como trabalhar com estados em componentes com React. Podemos fazer isso através do state. Também vimos como atualizar os valores dos estados e pedir para o componente ser renderizado novamente através da função setState.