Duvidas sobre o componente Search, do GitHub App

[Roger-Melo]

Olá, professor!

Estou com problemas no componente Search do GitHub App. Incluí um botão ao lado do input:

Atualmente, o único componente statefull da aplicação é o App. Devido ao botão, tentei fazer o seguinte:

• Envolvi o input e o botão em um <form>
• Converti o Search para class
• Removi o evento onKeyUp do input
• Adicionei o evento onSubmit no <form>

Só que se o método onSubmit modificaria o state userinfo, que está no App mas é utilizado em outros lugares da aplicação :dizzy_face: Vc pode me dar uma luz?

@fdaciuk

[fdaciuk]

Oi @Roger-Melo! É exatamente esse o motivo do app.js ser o único componente stateful da aplicação. O fluxo de dados no React é unidirecional: vem sempre de cima pra baixo. Quando você tem estado compartilhado, você deve então subir na árvore de componentes a manipulação desse estado, até que abaixo dele fiquem todos os componentes que vão apenas precisar usar esse state.

Se você fizer da forma que está pensando, primeiro que você começa a espalhar estado pela aplicação. Pense no caso de acontecer algum bug. Se você tiver vários componentes stateful, manipulando estados, vai ficar mais complicado você saber qual deles está causando o problema.

Segundo que, com o estado em nível mais "abaixo", não tem como você passar esse estado pra cima.

Agora, se você centralizar o estado, você sabe que, se acontecer algum bug, o problema vai estar onde o estado está sendo manipulado, já que todos os componentes abaixo são stateless: só recebem o estado e renderizam, mas não o manipulam =)

Sacou a ideia?

[Roger-Melo]

Entendi sim =)

Na verdade o que tá pegando é essa função. Eu gostaria de isolar a chamada ajax que está dentro dela em um novo método, para utilizá-lo tanto ao pressionar enter no input (método handleSearch) quanto ao pressionar o botão (método handleSubmit). Só que não estou conseguindo pegar o value do input no método handleSubmit que criei (também no app.js), então não adiantaria eu criar esse método, seu eu não conseguir invocar ele dentro do handleSubmit acessando o value do input como argumento...

@fdaciuk

[fdaciuk]

Entendi =) Então o que vc precisa fazer é um formulário padrão: deixe um form com evento onSubmit, e remova o evento do input.

Dessa forma, tanto se clicar no botão, quando pressionar enter, o formulário vai ser submetido =)

A única alteração que você vai ter que fazer é adicionar um id no campo do formulário, e pegar esse elemento dentro do método handleSearch com e.target.ID_DO_INPUT, já que e.target vai apontar para o form =)

[Roger-Melo]

Agoooora sim! :smiley:

A única alteração que você vai ter que fazer é adicionar um id no campo do formulário, e pegar esse elemento dentro do método handleSearch com e.target.ID_DO_INPUT, já que e.target vai apontar para o form =)

Minha cabeça estava dando voltas tentando achar uma maneira de acessar o value do input, hahah. Esclarecido. Obrigado, professor! =)

[fdaciuk]

haha! Show! Às vezes a gente precisa "voltar" um pouco, e pensar mais simples =) Qualquer coisa, avisa ae =)