Assim, o botão de adição aqui chama onAddGoal e isso basicamente encaminha a meta para o aplicativo. js que é exatamente o que precisamos, mas o
que também precisamos
fazer é ter certeza de que quando adicionamos um novo objetivo, o modal é fechado.
Agora lembre-se de que, no final, controlamos a visibilidade modal de dentro do aplicativo. arquivo js porque lá, temos o estado
isAddMode que estamos mudando quando clicamos nesse botão aqui, o botão adicionar novo objetivo por exemplo
e esse
valor de estado, isAddMode é encaminhado para a entrada do objetivo, onde o usamos para controlar a visibilidade
de o modal.
Portanto, para garantir que o modal desapareça, basta alterar isAddMode
novamente dentro do aplicativo. arquivo js porque o novo valor será automaticamente encaminhado para a entrada do objetivo.
Então, tudo o que precisamos fazer é adicionar o gerenciador de metas, onde definimos as metas do
curso, também temos que definir isAddMode como false, porque terminamos de adicionar. Agora, uma pequena nota lateral, a maneira como o React funciona se
você estiver definindo dois estados um após o
outro, ele agrupará esses dois, ele
não renderizará novamente o componente duas vezes após a primeira alteração e após a segunda alteração. todas as mudanças
de estado de uma só vez e apenas re-renderizar o componente uma vez, o que obviamente é bom,
caso
contrário teríamos um ciclo desnecessário de re-render lá e isso
é simplesmente uma ótima otimização que o React faz para nós. Assim, podemos absolutamente alterar dois estados diferentes um após o outro
assim e, com isso, o
modal deve saber, na verdade, também desaparecer se definirmos isso como falso. Vamos testá-lo aqui no
iOS.
Se eu adicionar Learn React Native aqui, clique em add, isso
desaparece e agora aprende muito mais, isso também funciona e eu ainda
posso excluir itens.
Agora para testar isso no Android, mesmo procedimento que antes,
vamos realmente reiniciar isso no
Android, clicar em adicionar novo objetivo e aprender Reagir Nativo aqui, clicar em adicionar e
isso fecha, agora vamos aprender muito mais aqui, assim e isso também funciona corretamente. Agora, duas melhorias minúsculas que eu ainda quero aplicar, por exemplo, quero limpar a entrada
assim que terminar e, além disso, quero fornecer um botão de cancelamento, para que, alternativamente,
em vez de adicionar isso, possamos cancelar aqui para fechar o modal sem adicionar um item porque,
agora, isso não é algo que podemos fazer.
Vamos começar limpando nossa entrada aqui
depois que entramos em algo. Para isso, na entrada de meta, no final,
temos essa
meta inserida e precisamos redefinir isso quando adicionarmos uma nova meta. Agora, é claro, adicionamos um novo objetivo quando pressionamos esse
botão de adição e, ao final, acionamos uma função que obtemos com a ajuda do prop da onAddGoal.
Agora, para limpar nossa entrada, o que podemos fazer aqui é adicionar uma função dentro do
componente de entrada do objetivo, adicionar manipulador de meta ou o que você quiser
chamá-lo, essa é uma função que não precisa aceitar nenhum argumento e no final, agora é essa função que eu
quero acionar.
Então eu quero acionar adicionar manipuladores
de metas, então minha própria função neste componente. Agora aqui, eu quero chamar props onAddGoal sem
bind aqui, podemos apenas chamá-lo assim porque quando esta função é executada, eu quero executá-la, aqui estamos
apenas passando um ponteiro para essa função sem parênteses, então
aqui nós não deve ter parênteses para não executar isso muito cedo, aqui nós
absolutamente precisamos de parênteses porque isso só é executado quando esta função é executada e
é quando eu quero acionar a função
no meu componente pai, portanto, no componente app aqui. E aqui para onAddGoal, é claro que ainda quero encaminhar
minha
meta inserida aqui, então, nesse estado, quero encaminhar isso, mas depois disso, também quero limpá-lo.
Então, a partir de então, configurarei
a meta inserida para uma string vazia novamente, o que redefinirá o texto que inserimos aqui.
Então, isso é uma
coisa, a outra coisa é um botão que nos permite fechar isso e para isso, podemos adicionar um botão aqui e esse
botão pode ter um título de cancelamento porque é no
final o que esse botão deve
fazer e
pelo cancelamento botão, pode ser bom não ter que usar a cor azul padrão, mas
mudar essa cor e você pode fazer isso adicionando a cor prop aqui,
por exemplo, podemos definir isso para vermelho aqui porque vermelho na minha opinião é uma cor agradável para cancelar botão.
Se salvarmos isso e testarmos isso aqui no iOS, vemos o
botão cancelar e o botão Adicionar
e agora se eu aprender Reagir Nativo aqui e eu adicionar isso, isso é adicionado e se eu reabrir isso,
você vê que foi limpo e O cancelamento, claro, não faz nada, porque precisamos conectar o cancelamento ao componente do
aplicativo, onde controlamos a visibilidade, controlando o isAddMode.
Então, aqui, nós também podemos adicionar outro manipulador de função no componente de aplicativo agora, cancelar o manipulador de adição de meta ou algo assim, é um nome muito
longo, eu
só quero ser claro sobre o que isso faz e quando é chamado.
Então, aqui, temos o manipulador adicional de meta de cancelamento e, no final, aqui, podemos simplesmente definir
isAddMode como false, o
que fechará o modal e, claro,
não estamos fazendo mais nada, não estamos alterando nossas metas porque cancelamos a adição e agora, podemos
encaminhar isso para o item de
meta, para entrada de meta, para o nosso componente aqui. Aí podemos adicionar onCancel prop, o nome do prop é claro
cabe a você, porque é o seu próprio
prop em seu próprio componente e eu tenho um ponteiro para cancelar o manipulador de adição
de meta para onCancel e agora dentro da entrada de meta, podemos trigger onCancel após pressionar este botão.
Então, aqui, adicionamos onPress e queremos acionar adereços. onCancel aqui, então a
função que estamos recebendo em nosso suporte onCancel. Com isso, o botão de cancelamento deve funcionar, sim
funciona muito bem.
Agora também deve funcionar no Android, claro, mas
para testá-lo, o
mesmo procedimento de sempre, vamos fechá-lo e reiniciá-lo e,
a partir daí, vamos ver se a limpeza da entrada funciona. Se eu inserir ou aprender React Native aqui, clique em add, yes is
empty e cancel also works.
Agora, com relação ao estilo aqui no Android, seria interessante ter algum espaçamento entre os botões
ou, na verdade, nas duas plataformas, talvez esses botões fiquem ao lado um do outro.