Resumo da Transcrição

Continuando, vamos lá e ver os botões aqui. Então, cada botão tem um on press. Mas o on press está definido como this, quando on canso press, this on ok press. Na verdade, a gente não quer isso. A gente quer passar como props o on press, a definição do on press. Da mesma maneira que a gente fez aqui, antes com os text inputs. Porque no ok, o ok do... É de estar post, não é o mesmo que o ok do novo post. Porque o ok do novo post vai fazer um pedido HTTP, que é o post, né? Tem o pedido get, tem o pedido post, put, faz o pedido put. Post, desculpa, pedido post, né? E o editor, quando clicar o que, eu pedi o HTTP para dar um update, né? No recorde, que vai usar a put, ou o patch, se você quiser. Eu vou usar a put, tá bom? PUT. Entendeu? Voltando aqui. Vamos lá. Esse cara vai ser dado como props. Certo? Se bem que o cancelar vai dar no mesmo, né? Vai dar o action da pop. Talvez... Hum, vamos ver aqui. O on canso é a mesma coisa. Então, a gente poderia definir o on cancel dentro do postform. Da... Poderia, não sei se é melhor ou não. Dá para pensar agora, o que você acha? Deixa aí nos comentários. Você quer recortar o cancel press e pôr aqui dentro do postform? Porque os dois vão fazer a mesma coisa, action.pops, ou quer deixar como props? Eu vou escolher deixar usar como props, tá bom? Deixa aqui, desce um props, dá um cancel. Certo? E desce um props, um on ok press. Agora, vamos voltar. O que a gente tem que fazer aqui? Então, o postform vai levar o que também? Qual é o nome? On cancel press e on ok press. Então, on cancel press. On ok press. Vai ser o que? Vamos lá. Esse on cancel press está definido aqui dentro do post new. Esse cara. Para acessar esse cara, a gente fala para chave des, ponto. O nome da função. Des, ponto, on cancel press. Da mesma maneira, o ok press está definido aqui. Des, ponto, on ok press. Tá bom? Novamente, a gente pega esse cara, passa como props. É o nome da props, é on cancel press, mesmo nome. Para o postform, o postform pode acessar essa props, com des, ponto, props, ponto, ok, on ok press. Certo? Quando clicar ou tocar o botão, vai chamar essa função des, ponto, props, on ok press. Que na verdade é o des, desculpa, des, ponto, ok press, que é esse cara aqui. Certo? Então, vamos salvar. Vamos ver se não deu nenhum problema. Ah, esqueci de importar o postform dentro do post new, que a gente está usando esse componente. Sempre tem que importar, vamos lá em cima. Eu vou botar aqui, antes do actions, import post new. Desculpa, postform, from, postform, mesmo diretor, né? Aqui, dentro da parte da componente. Vou salvar. Normalmente eu gosto de separar os imports, imports gerais de módulos, e os nossos props, componentes, customizados, eu gosto de separar com a minha nova, entendeu? Então, vamos lá. Vamos testar, volta ao simulador. Oh, deu erro. Qual é o problema aqui? Add JSON, JSX, elements, must be wrapped in an enclosing tag. O que é que significa? É aquela vela história que você só pode retornar um componente, não pode retornar vários componentes. Só pode retornar uma coisa. Então, vamos voltar na postform. Você note que eu colei tudo aqui, mas está retornando vários componentes, né? Vários caras aí. Então, vamos botar tudo dentro do quê? No anvil. Eu vou botar um anvil, certo? O que? Cobre esses caras dentro do anvil aí. Certo? Entendeu? Agora, vamos lá. Agora, retornamos um único componente, que é a view, que tem, inclui, no seu conteúdo, todos esses componentes. Vamos salvar e ver se não tem mais nenhum erro. Certo? Então, vamos clicar em um deles. Está aqui o botão editar. Editar post. Post edit. E o botão novo. Que a gente mudou o novo, né? Detalhe. Ainda está funcionando. Vamos testar. Que a gente mudou o componente post new para utilizar esse postform. Então, vamos ver. A, nesse, no seu quê? Vou clicar OK. Adicionou. Vou clicar cancelar. Volta. Então, está funcionando. Certo? Então, no próximo vídeo, a gente vai usar esse componente postform. Vai reutilizá-lo, né? No nosso, no nosso cena de editar. Dessa maneira, a gente não precisa fazer o novo form. A gente usa o mesmo componente. Valeu? Até mais.