Resumo do Vídeo sobre Validação de Limite de Caracteres

Olá a todos! Este vídeo vai ser sobre a validação do limite de caracteres para cada campo de texto do título e do conteúdo. Então, há duas maneiras de fazer essa validação aqui nesse formulário aqui. A primeira seria se primeiro deixar o usuário digitar quantos caracteres ele quiser. Então mesmo, por exemplo, o título, se o título tivesse o limite de três caracteres, por exemplo, aí o usuário digitar, se o usuário digitar uns mais de três, cinco, dez, você poderia deixar o usuário digitar e só mostrar a mensagem, Ei, você não pode digitar mais de três caracteres. E tem também outra maneira de validar que é a maneira de impedir o usuário de digitar mais de três, automaticamente impedi-lo de fazer. E essa que eu vou usar nesse caso, que eu acho muito mais fácil de fazer e mais conveniente, que o usuário já vai entender que não pode digitar mais de três caracteres, porque não vai aparecer na tela, ele vai ficar digitando, mas nada vai acontecer, não vai adicionar mais caracteres, certo? Então nós vamos fazer a validação da maneira, da segunda maneira e para fazer isso vai ser bem fácil, nós vamos usar uma propriedade do TextImport chamada MaxLength, se você for a documentação do React Native, eu estou usando versão 36, por isso que eu estou escolhendo documentação 36, mas funciona nas versões novas também. Indo aqui para a documentação do TextImport, do componente TextImport, você vai usar, nós vamos usar a MaxLength, aqui é a explicação, limita o número máximo de caracteres que pode ser entrado, digitado, certo? E eles até recomendo usar esse, em vez de fazer, de escrever a lógica, usando JavaScript para prevenir esse negócio de Flickr. Então a gente vai aplicar essa propriedade, vai definir a propriedade do TextImport com o número de caracteres para ser o limite daquele campo, certo? Eu acho que eu falo aí nos vídeos anteriores que a gente iria adicionar uma propriedade, um condicional à função ValidateField, mas nós não vamos fazer isso, em vez de mudar o ValidateField que tinha lá no PostNew, eu não vou mudar esse cara, eu vou em PostForm, componente PostForm, que é esse aqui, que está sendo usado pelo PostNew, e pelo PostEdit, certo? Eu estou na página no Post, e vou adicionar a propriedade a esse TextImport e o outro TextImport para o conteúdo, certo? Antes de começar, eu só vou habilitar aqui o chamado Hot Reloading, que eu não quero reiniciar o aplicativo toda vez que eu fazer uma mudança, certo? Ele já tem esse chamado Live Reload, quando você tem o Live Reload habilitado, qualquer mudança no código causa o aplicativo a reiniciar automaticamente. Agora com Hot Reloading, qualquer mudança no código, ele vai reiniciar o aplicativo mais com o mesmo estado anterior, por exemplo, aqui eu estou na página de novo Post, mas quando dá o Live Reload, ele reinicia tudo e volta para o começo, dessa maneira. Mas se usar o Hot Reload, ele vai manter esse estado aqui e vai saber voltar para onde é que eu estava anteriormente. Então, só para demonstrar, ele vai habilitar Hot Reloading. Agora eu estou novo e vou fazer uma mudança aqui. Salvei o arquivo, senão te apareceu Hot Reloading no topo e nem reiniciou. Hot Reloading está no mesmo estado, vou digitar uma coisa, mudar de novo, Hot Reloading está no mesmo estado. Agora deixa de desabilitar aqui. Desabilitar Hot Reloading, vou digitar alguma coisa e vou mudar o arquivo para ver. Agora tem Live Reloading, certo? Salva, você acha que o Live Reloading reiniciou tudo e volta para a cena principal. Então vou voltar e habilitar o Hot Reloading. O Hot Reloading mantém o estado. Estou aqui no formulário novo post, vamos começar a validação. É bem fácil, adicione a propriedade MaxLength com o número de carteres para ser o limite. Nesse caso, eu tinha falado antes que o limite seria, eu tinha escolhido o limite de 40 carteres para o título e 512 para o conteúdo. Então eu salvei aqui o arquivo e automaticamente o Hot Reloading aplicou as mudanças. Então vamos tentar digitar mais de 40. Na verdade eu quero demonstrar antes de 40 que isso está funcionando, vou botar só 3, desculpa, vamos botar só 3 aí para ver se realmente essa propriedade está funcionando. Salvei, deu o Hot Reloading. Eu estou digitando e não vai mais de 3, certo? Pode digitar quanto quiser que não vai. Então eu ouvi eu digitando aqui, não vai. Então está funcionando. Ele impede o usuário digitar mais de 3 carteres para propriedade MaxLength. Certo? Então vou voltar para 40 que é o que eu queria, que eu escolhi. E eu quero que você faça a mesma coisa para o conteúdo. Eu vou escolher 512, limite de 512 carteres. Se você tiver escolhido outro, está legal também, mas quero ver você fazer pro si próprio. E aí, deu certo? Então vamos lá, esse é o texto ímper do conteúdo, vamos adicionar MaxLength para meu caso 512. Certo? Mas antes disso para ver se está funcionando realmente, vou botar 3 carteres, salvar. Ele deu o Hot Reloading, as mudanças já foram salvadas. Estou digitando aqui, mas não consigo digitar mais de 3 carteres, então está tudo ok. Vou voltar esse cara para 512. Certo? E por isso é a validação do limite de carteres. Usando essa propriedade bem conveniente chamada MaxLength do TextInput. Com isso essa propriedade impede o usuário de digitar mais do que os números de carteres que foram definidos aqui. Certo? Então espero que tenha gostado desse vídeo e até a próxima.