React UI em sincronia com o state

Vamos fazer do input um "componente controlado" reagindo a cada alteração na entrada e capturando-a no estado do componente. Isso nos da a garantia de que a UI será sempre uma representação do estado atual da aplicação.

No React, a view deve ser renderizada em função do estado da aplicação. Isso significa que que as mudanças no state devem refletir na view. Assim como a lista de tarefas no state reflete na renderização da view. As mudanças ocorridas na view devem refletir no state da palicação.

Quando escrevemos algo no input, veremos isso na view, mas isso não estará em nenhum lugar do nosso state. Nós devemos manter o state em sincronia com a view. Então vamos capturar essa informação e armazenar no state.

Vamos adicionar a propriedade currentTodo na state da aplicação:

state = {
    todos: [ ... ],
    currentTodo: ''
  }

E vamos atribuir esse valor a nosso input text:

<form>
  <input type="text" 
    value={this.state.currentTodo} />
</form>

Perceba que ao salvar o arquivo o input text estará vazio, refletindo o valor vazio que adicionamos ao state. Agora quando digitamos algo no input, nada acontece. Isso é por que o valor no state está setado como vazio e não temos nenhuma maneira ainda de mudar isso. Para permitir um novo valor, precisamos criar uma manipulador de eventos para capturar a entrada e atribuir o valor à propriedade currentTodo no state do componente.

Então vamos adicionar um método OnInputChange(event) ao nosso componente que vai receber um evento, capturar o valor da entrada em event.target.value e atribuir esse valor à currentTodo no state do componente.

<form>
  <input type="text"
    onChange={this.OnInputChange}
    value={this.state.currentTodo} />
</form>

Nosso primeiro instinto é atribuir esse valor a this.state.currentTodo = event.target.value dessa maneira. Mas como já vimos, não devemos manipular o state de um componente diretamente. Então vamos usar o this.setState() do componente dessa maneira:

OnInputChange = (event) => {
  this.setState({
    currentTodo: event.target.value
  })
}

Abra o React DevTools e observe que agora o currentTodo faz parte do nosso state e quando digitamos um valor ele é atualizado refletindo nossa entrada.

Ao fazer isso, garantimos que a view renderizada e o state do componente estão sincronizados.