Então, houve muita conversa, muita coisa sendo feita, agora é realmente hora
de fazer este botão funcionar e vamos adicionar um objetivo aqui, certo e para
isso precisamos
descobrir o que o usuário entrou e depois disso, é claro ouça um toque no botão
e, em seguida, adicione o objetivo inserido a uma série de metas que temos de gerenciar em algum lugar, o que
podemos produzir lá embaixo nessa vista inferior, certo, é
o que precisamos fazer. Agora, neste curso,
usarei componentes funcionais apenas com o recurso de ganchos React, que é relativamente novo, portanto, caso
você ainda não saiba reagir ganchos, definitivamente aprenda sobre eles primeiro, por exemplo, no meu
Guia
Completo de React, mas anexado, você também encontra alguns outros recursos que o
iniciam com os ganchos React, pois precisaremos de ganchos React para, por exemplo, obter a entrada do usuário.
Usamos o gancho useState para o que importamos do React, não do React Native, mas do
React, é um recurso
principal do React e então aqui neste componente funcional, neste componente de aplicativo, podemos obter o objetivo inserido e também obter
o conjunto Inseriu a função de meta para atualizar o estado com a ajuda de useState e, por padrão, temos um estado
inicial que é uma string vazia porque o usuário não inseriu nada no início.
Agora podemos vincular isso à entrada
de texto, o que significa que quando o usuário digita um caractere, queremos atualizar nosso estado e salvar
o texto digitado no estado aqui que podemos acessar através da meta inserida e passaremos
a meta inserida de volta para a entrada de texto. Essa é uma ligação bidirecional, um chamado componente controlado que você também
conhece do React for web com elementos de entrada HTML normais.
Então, aqui podemos ouvir onChangeText, um prop fornecido pela entrada de texto que leva uma função que será
executada para cada pressionamento de tecla.
Agora podemos fornecer uma função inline aqui, mas também podemos configurar uma função separada para ter
um pouco de código mais limpo e você pode ter uma função em uma função e precisamos
tê-la aqui, para que possamos usar nosso estado ou defina a função de meta inserida aqui, simplesmente adicionando uma nova função aqui, o manipulador de entrada de
meta pode ser um nome, mas o nome cabe a você. Nessa função, obteremos o texto inserido automaticamente, que será
transmitido pelo React ou pelo React Native aqui e poderemos chamar o set de meta informado e passar o texto inserido
como um valor, porque o texto inserido aqui já será um string porque conectamos o manipulador de
entrada de meta ao onChangeText simplesmente apontando para ele aqui. Agora, isso é importante, não inclua parênteses lá embaixo, porque
isso executaria essa função quando esse código for analisado, portanto, quando a interface do
usuário for renderizada pela primeira vez. Você não quer executar isto imediatamente, você
quer executá-lo em cada tecla e, portanto, você apenas pega o nome da função, você passa o nome
da função para onChangeText e isso efetivamente diz ao React Native, hey que é o função eu deveria executar
para cada batida de tecla, assim não some parênteses aqui de forma que isto pode correr em toda batida de tecla.
Agora, em vez desta sintaxe de função, você também pode usar uma sintaxe diferente que é a
que eu usarei em todo o curso, onde você cria uma constante com esse nome aqui e então o valor
dessa constante após o sinal de igual é simplesmente um função usando essa sintaxe de função de seta, então esta aqui é a sua
lista de argumentos e este é o corpo da função. Isso é normal sintaxe Javascript, é suportado pelo código
JavaScript React Native é capaz de executar e, portanto, esta é a sintaxe que vou
usar, você conectá-lo ao onChangeText exatamente da mesma maneira que antes. Ok, agora temos essa função conectada, atualizamos nosso estado com
o que o usuário digitou em cada pressionamento de tecla, agora também
temos que passar o texto de volta para a entrada de texto, para que ele seja exibido corretamente simplesmente vinculando
a propriedade de valor a entrou meta, para o nosso estado que vai mudar a cada batida de tecla.
E com isso, estamos obtendo acesso à entrada do usuário porque ela
sempre será armazenada em uma meta inserida. Agora, quando o usuário pressiona o botão, queremos usar essa
meta inserida, então, para isso, adicionarei outra função aqui, adicionar gerenciador de metas e isso é apenas uma convenção de nomenclatura que
estou usando para essas funções aqui, você pode nomeá-las o que você está acostumado com seus aplicativos
do React, no final, o nome da função deve simplesmente descrever o que está prestes a acontecer e que aqui será
manipulado um pressionamento no botão que, no final, adicionará um objetivo. Aqui a função não aceita nenhum argumento, mas no corpo da função, eu
quero adicionar minha meta inserida a uma lista de objetivos e não temos lista ainda, então por enquanto
o que eu faço aqui é log de console, que é suportado em React Nativo, entrou meta para que pelo menos vejamos que isso
foi salvo corretamente e que essa função é executada. Para isso, precisamos conectá-lo ao botão,
no entanto, podemos adicionar o prop onPress e apontar para o manipulador de meta
de adição, novamente sem parênteses, para que isso não seja executado imediatamente, mas apenas quando uma prensa acontecer.
E agora vamos salvar tudo isso e vamos voltar e vamos talvez digitar learn React Native e o bom é que você pode usar o seu teclado
real aqui e pressionar add e você deve ver aqui no seu terminal esse log, você também vai ver isso pela maneira em
suas ferramentas expo dev aqui na guia do navegador. Lá, se você clicar em um dos dispositivos
conectados, aquele em que você acabou de clicar no botão no meu caso,
o dispositivo Android e lá na parte inferior, você também verá o Learn React Native.
E claro que também funciona no iOS, saiba tudo sobre o React Native, se entrarmos aqui e clicarmos em add, então
vemos também que estar logado aqui e também ver isso nas ferramentas expo dev, se clicarmos no iPhone no
muito fundo, vemos esse log. Ok, então estamos recebendo
a entrada do usuário, estamos armazenando, estamos fazendo o log do console,
é claro que não queremos consolar o log, queremos enviá-lo abaixo de nossa entrada aqui, queremos
um lista de nossos objetivos abaixo desta área de entrada. Então, para isso, precisamos da segunda visualização aqui que deve mostrar nossa lista de itens.
Então, aqui entre as tags de abertura e fechamento, eu quero mostrar todos os elementos
que adicionamos, todos os objetivos que adicionamos. Para isso, primeiro precisamos gerenciar nossos objetivos e
podemos configurar outro estado para o que inicialmente é um array vazio, portanto, eu passo um array
vazio como um valor para usarState e lá temos os objetivos do curso e as metas do curso função.
Agora, esses nomes estão sempre à sua disposição, mas eles devem descrever o que está em seu estado e
como você pode atualizá-lo.
Então, agora, quando adicionamos uma meta, quero atualizar as metas do meu curso para adicionar a
nova meta e, para isso, posso definir as metas do curso e agora definir as metas do curso para uma nova matriz onde tomo minhas metas e adiciono
uma novo.
Agora esta é a sintaxe que você pode não saber, que
é o chamado operador de propagação, é um recurso de JavaScript que pega uma matriz existente e metas
de curso é uma matriz, é nosso instantâneo de estado atual antes da atualização e extrai todos os elementos array e, em seguida, adiciona-los aqui
para uma nova matriz é por isso que eu tenho os colchetes circundantes, sem este colchetes circundantes
isso
não funcionaria, mas agora criamos uma nova matriz e adicionamos todos os elementos da matriz antiga e agora
podemos adicione também um novo elemento.
Então, aqui, adiciono uma vírgula para adicionar
um elemento extra depois de todos os elementos que estou retirando aqui e o elemento que adiciono aqui é minha meta inserida, é claro.
Agora, atualizamos nossa lista de metas com a lista antiga
de metas, inicialmente uma lista vazia, mas isso aumentará com o tempo, porque também
adicionamos uma nova meta quando pressionamos esse botão. Agora, uma minúscula nota lateral, ao trabalhar com metas
definidas, metas do curso aqui é o nosso estado anterior e
a maneira como o React atualiza o estado, esse deve ser sempre o instantâneo mais atual, mas não
é 100% garantido. , quando você atualiza seu estado com base no
estado antigo, você pode usar a função function dessa função set onde você não passa o valor
do
seu novo estado aqui, mas ao invés disso você o passa em uma função, tipicamente uma função anônima onde
você obtenha seu estado atual ou objetivos atuais, assim, seu instantâneo de estado atual e, em seguida, retorne seu
valor atualizado, portanto, aqui eu retorno meu array atualizado com a sintaxe da função de seta in-line, se você tiver
apenas uma expressão, omitir as chaves return statement e apenas digite o valor que você
deseja retornar e ele será
retornado e isso é tudo normal Javascript aqui, nada Reagir nativo específico.
Então, aqui, eu tomo minhas metas atuais e, em seguida, adiciono minha meta inserida. Esta sintaxe é um pouco melhor, a outra sintaxe teria
funcionado tão bem, mas é garantido que sempre funcionará, porque o React Native
sempre irá em frente e lhe dará a garantia, o último instantâneo de estado antes de aplicar a mudança
de estado aqui.
Agora tudo bem, agora teremos uma lista, uma série de metas gerenciadas aqui. Como podemos agora produzir isso?