Então, de que outra forma podemos otimizar isso?
Bem, você pode notar que esse código jsx aqui no final pode ser repetido várias vezes, cada entrada se
parece com isso.
Temos uma visão, temos um rótulo com a própria entrada de texto e também podemos querer algum texto de erro
que possamos exibir.
Portanto, faria sentido terceirizar isso em um componente separado e é
exatamente isso que eu quero fazer.
Vou para minha pasta de componentes e, na pasta da interface do usuário, adicionarei uma entrada. arquivo js que conterá um componente React, então eu
importo o React naturalmente, e depois importo algumas coisas do React Native e essas coisas
no final são minha visualização, componente de texto, componente de entrada de texto e folha de estilo porque
eu ' Também precisamos disso do React Native e, com isso aqui, podemos criar o componente de entrada aqui que obtém props
e precisa retornar algum jsx. Teremos um objeto de estilos com a Folha de estilo. criar e, claro,
no final, exportamos isso como padrão aqui, esse componente.
Agora, se voltarmos à tela de edição do produto, podemos recortar esse código jsx do título, para que a vista circundante, o texto, a entrada de texto
e essa mensagem de erro separe, retire-a daqui, saia da tela de edição
do produto e mova-a isso na tela de entrada e lá, use-o como um valor de retorno no componente de entrada aqui.
Agora, é claro, precisaremos ajustar isso um pouco, mas esse é o nosso esqueleto geral que eu quero
usar lá.
Agora, também na tela de edição do produto, eu escolho
o estilo. Nesse rótulo de controle de formulário e estilo de entrada, todos podem ser removidos
e devem ser movidos para o componente de entrada e para a folha de estilo.
Portanto, agora com isso, é claro, isso só pode ser usado para um título e eu quero criar
um componente de entrada que possa ser usado para qualquer entrada, o que, por exemplo, significa que o rótulo aqui precisa ser dinâmico, por
isso espero coloque isso em um suporte chamado label talvez.
Em geral, também quero ter certeza de que a entrada de texto possa ser configurada
de fora para encaminhar todos os objetos que recebo do meu componente de entrada aqui para a entrada de texto, para que nesse componente de
entrada possamos definir coisas como o tipo de teclado, porque eu não quero codificar isso aqui, em
vez
disso, deve ser um invólucro reutilizável em torno do componente de entrada de texto que pode ser
configurado de fora.
Portanto, essas configurações aqui, por exemplo, eu as cortarei daqui para que possamos defini-las de fora, também me livrarei
desses ouvintes porque realmente não precisamos deles.
O texto do erro aqui também deve ser definido de fora, portanto, vou verificar o texto do
erro dos adereços aqui e,
é claro, você pode sempre dar a esses adereços os nomes que desejar,
é claro que também precisaremos alterar o que designamos aqui como valor e assim por diante,
isso também mudará.
Mas agora já podemos começar a usar
essa entrada aqui, vamos para a tela de edição do produto e lá, irei apenas para o topo e importarei as entradas da pasta de componentes, é claro, e da pasta da interface do
usuário e de entrada, e então nós pode começar a usar o
componente de entrada no local em que eu anteriormente tinha meu componente de entrada de
texto aqui.
Então, apenas adicionarei entrada e, agora, na entrada, podemos adicionar a configuração que eu corto, como o tipo de teclado e
assim por diante, porque isso será encaminhado.
Podemos definir nosso rótulo de título, como título, e também nosso texto de erro possível, como Digite um título válido, embora isso não seja
tudo o que faremos em relação à validação, mas é um começo.
É assim que podemos usar essa
entrada e, é claro, também é assim que agora podemos usá-la para substituir as outras entradas.
Então, por exemplo, aqui, o imageUrl, aqui eu o defino como imageUrl. Digite um imageUrl válido, talvez o padrão do tipo de
teclado esteja correto, a correção automática de capitalização automática não é necessária, digite a chave de retorno
em
seguida, podemos deixar isso, não estamos fazendo qualquer coisa com isso, poderíamos
adicionar alguma lógica, mas não estou fazendo isso aqui. Para o preço, deixarei a renderização condicional, mas lá, posso
adicionar minha entrada aqui, defina-a como preço, insira um preço válido, o tipo de teclado aqui obviamente não deve ser o padrão, mas o teclado decimal, não precisa
de capitalização automática ou correção automática, então vamos nos livrar disso. E para a descrição aqui, também adicionarei minha
entrada aqui, descrição, insira uma descrição válida, o tipo de teclado pode ser o padrão, posso usar capitalização automática, correção
automática, no entanto, não definirei um tipo de chave de retorno, mas aqui Eu
quero definir várias linhas assim, o que permite a edição de várias linhas e o número de linhas,
digamos três.
No entanto, isso é usado apenas pelo Android, mas lá, ele restringirá o número de linhas que você
pode inserir; no iOS, isso não terá efeito, mas é assim que agora você pode usar esse componente de
entrada e ainda configurá-lo de fora.
Dito isto, como eu disse, ainda
não terminamos, e o valor e esse ouvinte de alteração de texto?
Existem diferentes maneiras de como você pode lidar com essa entrada de texto ou com os valores de texto aqui.
Você ainda pode simplesmente encaminhá-lo para o componente pai e usar esse componente de entrada apenas como invólucro
visual, mas
irei um pouco mais além e quero gerenciar esse valor e a validade dessa entrada única dentro do componente de entrada,
para que Em seguida, só relato de
volta ao meu componente pai, para a tela de edição do produto, no final, qual é o valor atual e se é
válido ou não, para que a validação não
precise acontecer dentro do componente pai, mas novamente que está totalmente funcionando para
você, se você quer fazer isso ou não. Aqui, adicionarei uma nova constante no componente
de entrada, manipulador de alteração de texto, onde recebo esse texto de entrada, porque agora é isso que vinculo ou
o que já está vinculado e, geralmente, vou mantê-lo assim, embora não precisemos do
identificador aqui mais, não precisa
de ligação, portanto, porque isso está dentro de uma única entrada, não precisamos de um
identificador lá.
Isso agora será acionado a cada pressionamento de tecla
e, portanto, agora aqui, quero verificar se isso é válido ou não e também gerenciar meu valor dessa entrada. Agora, para isso, podemos novamente usar um redutor ou estados individuais gerenciados com o estado
de uso ou criados com o estado de uso, mas eu irei para um redutor
e aqui tenho meu
redutor de entrada, o nome é com você, obtém o estado, obtém um ação e retorna um novo estado no
final.
Então aqui na entrada, eu posso chamar use reducer e encaminhar ou configurá-lo para o redutor de entrada e meu estado inicial
para esta entrada aqui será um objeto Javascript simples com três valores. O valor que você possui atualmente, que inicialmente pode estar
vazio, mas na verdade eu quero me permitir definir um valor inicial de fora, porque precisaremos
disso, por exemplo, quando estivermos editando produtos,
por isso, verifico se o valor inicial de adereços está definido
, novamente, é claro que
esse é um nome que você pode escolher
da maneira que desejar e, se
for
esse o caso, definirei isso como valor inicial, caso
contrário, definirei isso para uma sequência vazia, e também gerenciarei se isso é válido ou não e lá novamente eu posso verificar se adereços inicialmente válidos,
digamos que esteja definido.
Se for esse o caso, aceitarei automaticamente o valor que
deve ser verdadeiro ou falso; se não
for o caso, isso será tratado automaticamente como
falso e também gerenciarei se isso foi tocado ou não, para que o usuário realmente digitou aqui e isso
pode ser útil para nos ajudar a fornecer uma melhor
experiência do usuário em relação a quando mostramos erros de validação e aqui configurarei isso como false inicialmente.
Agora, é claro, isso nos devolverá o instantâneo do estado de entrada e uma função de despacho,
que eu também posso nomear despacho, porque não teremos conflito de nomes e, no manipulador de alterações
de texto, é claro que despacharei uma ação, uma ação que, portanto, criará aqui com um identificador de ação, alteração
de entrada, por exemplo, que deve ser despachada aqui, digite change de entrada e,
em seguida, aqui no redutor, podemos adicionar uma instrução switch para misturar as coisas, verificar o tipo de ação e a alteração de
entrada de caso , queremos fazer alguma coisa. No caso padrão, retornarei apenas meu
estado, portanto não farei nada, mas aqui, é claro, quero fazer outra coisa.
Agora, aqui no manipulador de alterações de texto, obviamente envio a alteração de entrada e desejo encaminhar
o valor que armazenei em
uma chave de valor, mas agora aqui também quero fazer a validação específica da entrada e encaminhar as informações, independentemente de
a entrada ser válida ou não. . E, para isso, em anexo,
você encontra alguma configuração de validação ou algum código de validação, que eu mostrarei agora.
Aqui eu tenho uma constante que configura uma expressão regular de email, portanto, uma expressão regular que
nos permite validar endereços de
email, ainda não temos entrada de endereço de email, mas mais tarde, quando adicionarmos autenticação, teremos isso e
então eu quero poder para usar esse
componente de entrada, esse componente deve estar preparado para também validar emails.
Então eu tenho a variável auxiliar válida aqui, porque temos várias verificações aqui.
Agora, quero garantir que possamos definir os critérios que queremos usar de fora com a ajuda de adereços, por exemplo, verifico
se um adereço necessário está definido, se está definido como verdadeiro, se está definido
e se Nesse caso, essa verificação será realizada. Se o suporte necessário não estiver definido, essa verificação
não será executada e, portanto, essa validação não será executada, e é o caso de
todas as minhas validações diferentes aqui.
Portanto, podemos definir um suporte necessário para verificar se não está vazio, se está vazio, configuramos como válido.
Podemos definir um suporte de email no componente de entrada para validá-lo por ser um endereço de email válido e,
se não for, configuramos como false.
Podemos verificar um número por ser muito pequeno ou muito grande ou uma string por ser muito curta
com o
validador de comprimento mínimo e, é claro, você pode adicionar mais lógica aqui, possivelmente também
com um pacote como ValidateJs, que eu já mencionei anteriormente. Agora com isso, terei é válido no final, o que é verdadeiro
por padrão, mas falso assim que uma validação falha e, portanto, agora, podemos adicionar também é válido para essa ação
despachada.