Por isso, passamos algum tempo na entrada, mas lidar com a entrada do usuário é
importante, você deseja fazê-lo de uma maneira que pareça natural
para o usuário, que
faça sentido para o usuário e onde você nunca confie no usuário e sempre valide o que o
usuário entra e vamos nos aprofundar em toda essa
validação, as entradas do usuário entregando as coisas mais tarde no curso, onde também aceitamos entradas mais
complexas do
que um número simples, mas, por enquanto, essa foi uma ótima primeira olhada em como você pode estilizar
tais uma entrada e como você pode obter os dados necessários. Com isso, eu não sei sobre você, mas acho que é hora de progredir
também com o nosso jogo, porque estamos meio que presos aqui,
essas são etapas importantes, mas não estamos realmente progredindo com o nosso jogo ou com o nosso aplicativo aqui .
Então, vamos garantir que faremos isso como um próximo passo e, para isso,
por que não garantimos que nossos botões façam alguma coisa? Vamos começar com o botão de reset bem rápido, porque isso
será simples. Quando você pressiona,
é claro que simplesmente desejo redefinir o valor digitado. Então, registrarei uma nova função lá no componente da
tela inicial do jogo, nomeie-a como redefinir o manipulador de entrada e essa é apenas a convenção de
nomes que eu gosto, nomeie essas funções que são acionadas em um evento do usuário, manipulador de algo no final, apenas para torná-lo
claro que eles lidam com determinados eventos,
isso não é obrigatório, apenas uma preferência que tenho pelos aplicativos React em geral e, portanto, também pelos aplicativos
React Native.
Essa será uma função que chama o valor inserido definido, que é a nossa função de configuração de
estado aqui para atualizar o estado que retornamos à entrada e configurá-lo para uma
string vazia e, sim, com isso podemos conectar isso ao botão de reset aqui, O onPress agora deve simplesmente executar
o manipulador de entrada de redefinição assim.
Vamos
tentar rapidamente, digitar algo aqui, redefinir
e desaparecer, está
com boa aparência e
também certifique-se
de que este botão aqui, o botão confirmar, faça alguma coisa. Para isso, adicionarei outro botão, confirmo o manipulador de entrada e poderíamos simplesmente iniciar o jogo
imediatamente aqui, mas também para praticar isso, quero dar
ao usuário uma chance final de mudar sua escolha, então aqui só quero digitar da saída a essa é sua escolha, você
deseja iniciar
a mensagem, onde o usuário recebe um botão para iniciar o jogo, apenas uma etapa extra, para que
tenhamos alguma prática extra aqui. Para isso, adicionarei
um novo estado que gerencia o estado confirmado pelo usuário e, inicialmente, isso é falso, mas é claro que
podemos mudar isso e queremos poder obter o estado atual.
Então, aqui vamos saber se o usuário confirmou ou não e
podemos definir esse estado confirmado com o segundo elemento na matriz que estamos extraindo. Então, lá em baixo, no manipulador de entrada
de confirmação, defino confirmar como verdadeiro, no manipulador de entrada de redefinição, a propósito, defino-o como falso porque se o usuário clicar
em redefinir, o usuário certamente precisará confirmar os valores para que possamos redefinir isso e,
em seguida, aqui no manipulador de entrada de confirmação,
eu também quero fazer duas coisas diferentes, duas outras coisas.
Um é redefinir o valor inserido, mas também, é claro, salvar o valor inserido como o valor com o
qual iniciaríamos o jogo.
Podemos fazer isso com outro
estado que estamos gerenciando, que inicialmente não possui nada, não tem valor, é indefinido inicialmente, porque esse deve ser o número
selecionado e agora também deve ser realmente um número e não algum texto.
Portanto, aqui temos o número selecionado e uma função para
defini-lo e quando o usuário clicou em confirmar antes de redefinir meu valor digitado, embora todos aqui sejam agrupados de qualquer maneira, para
que também possamos usar o valor digitado aqui depois de defini-lo como um valor string vazia porque isso
será feito apenas no próximo ciclo de renderização e não imediatamente após a execução desta linha.
Portanto, ainda podemos executar ou acessar com segurança esse valor inserido posteriormente, se
quisermos, porque aqui, eu quero definir meu valor inserido com parseInt, passando o valor inserido, portanto, defino-o como meu número selecionado e, novamente, ainda posso acessar inserimos
o valor aqui,
embora o redefinamos porque essa coisa de redefinição aqui será basicamente enfileirada pelo React e
só será processada na próxima vez que o componente for renderizado posteriormente e essas
três
alterações de estado forem agrupadas em lotes para resultar em um ciclo de renderização. pode acessar com segurança o
valor digitado aqui, mas também podemos simplesmente fazê-lo antes de redefini-lo,
isso não importa.
O importante é, no entanto, que analisemos isso como um número inteiro para convertermos esse texto em um número
aqui e, na verdade, adicionarei mais uma etapa extra antes de fazer isso. Logo no início, terei meu número escolhido aqui, que
é o número analisado e, antes
de fazer qualquer coisa, quero verificar se o número escolhido não é um número que é um valor Javascript padrão,
portanto, se de alguma forma ainda não é um número número, mesmo que estejamos tentando verificar caracteres inválidos ou
se o número escolhido é menor ou igual a zero.
Se for, então eu só quero retornar,
não quero
continuar, então return retornará a execução da função e não confirmará, não usará isso como
um valor porque o valor
é inválido, apenas números positivos são permitidos e nenhum número inválido é permitido.
Além disso, também quero adicionar uma verificação extra e verificar se o número escolhido talvez seja maior que 99, porque isso
também não seria permitido, quero ter
um número entre 1 e 99 e deve ser um número. Se não estiver de acordo com esse critério, retornaremos; agora,
caso contrário, definiremos esse número escolhido como o número selecionado e, em seguida, redefiniremos a entrada e, em seguida, essas
três chamadas de estado definido serão agrupadas em lotes e o componente será renderizado novamente. teremos nosso
novo estado que leva esse número em consideração como o número selecionado. Portanto, agora podemos conectar o manipulador de entrada de confirmação
ao botão de confirmação aqui e agora algum feedback visual também seria bom em
verificar que a confirmação funcionou ou também obter um erro se violarmos uma dessas regras aqui, para que não apenas retornar,
mas também mostrar um alerta.
Agora vamos começar com o feedback antes de trabalharmos no alerta. Para o feedback, aqui abaixo
desta função, mas dentro do nosso componente funcional, quero verificar se confirmamos e depois definir algum
conteúdo especial que deve ser produzido.
Então aqui temos a saída confirmada, que normalmente
é indefinida, mas se tivermos confirmado, a saída confirmada é um código jsx, onde resumimos o que o usuário
digitou e fornecemos ao usuário o botão Iniciar jogo.
Agora, apenas para ver se funciona, vamos com um texto aqui e digamos o número escolhido e o
número selecionado aqui, o número selecionado, esse é
o estado que estamos gerenciando aqui.
Portanto, como chamamos conjunto confirmado e assim por diante, o componente será renderizado novamente quando escolhido,
portanto, toda essa função do componente será executada novamente e isso significa que o confirmado
será verdadeiro para a próxima execução, porque nós o definimos como verdadeiro aqui e
portanto,
definiremos a saída confirmada como esse texto e agora podemos adicionar a saída confirmada, digamos aqui abaixo do cartão.
Então, lá eu quero produzir a saída confirmada e isso é indefinido,
não
imprime nada na tela ou é este texto. Com isso salvo, se voltarmos e eu inserir o número e confirmar aqui, vemos o
número.
Se eu digitar algo inválido como zero, não
o veremos, portanto nossa verificação parece funcionar e um número válido é emitido.
Agora, esse não é o design final que eu quero ter, mas prova que funciona.
Antes de finalizarmos esse design, verifique se também mostramos um alerta se algo inválido for inserido.