Então, vamos continuar trabalhando nisso e vamos mudar para uma função de manipulador de alteração
de texto, que
agora atribuímos ao texto onChange aqui no título, mas que também podemos adicionar ao nosso imageUrl.
Portanto, aqui para o texto onChange, eu também o defino como manipulador de alterações de texto e, agora,
para que funcione, precisamos garantir que essa função obtenha informações sobre para qual entrada foi acionada,
portanto, se você acabou de digitar o título ou o entrada imageUrl.
Portanto, além de obter o texto, também espero obter um argumento diferente,
espero obter meu identificador de entrada ou algo assim, você pode nomear o que quiser para que essa
função possa ser reutilizada para várias entradas de texto e ainda assim obtermos informações sobre qual
entrada desencadeou
isso para que possamos encaminhar isso para o nosso redutor, onde mais tarde precisaremos dessas informações para
atualizar nosso estado corretamente.
Agora, para obter essa funcionalidade de identificador de entrada, precisamos ir para os locais onde usamos o manipulador
de alterações de texto e, por exemplo, podemos usar bind ou usar uma função de seta anônima de quebra automática para vincular isso
onde não me importo mais importante, para configurar os argumentos que essa função obterá e há
um argumento especial que eu quero passar e esse é o identificador de entrada.
E para esta função aqui, para esta chamada de função nesta
entrada de texto, é claro que seria o título. Para essa entrada lá embaixo, teríamos vinculado esse imageUrl e, novamente,
esse deve ser um identificador que você também possui em seu estado lá em cima, no
estado do formulário que você passa para o redutor. Com isso adicionado, garantiremos que o manipulador de alterações de texto seja executado e
obtenha esse argumento do identificador de entrada.
O argumento de texto também será recebido porque esse é o argumento padrão pelo qual
o React Native nos passaria de qualquer maneira e será automaticamente recebido como o último argumento nessa função.
Portanto, não precisamos e, na verdade, não podemos vincular
isso aqui, ele será encaminhado automaticamente.
Agora temos uma função de manipulador de alteração de texto reutilizável aqui
e também podemos atribuí-la a outras entradas, como aqui ao imageUrl, como aqui pelo preço, podemos vincular o
manipulador de alteração de texto, vincular isso e então price é o nosso identificador
aqui e, claro, também para a descrição, colamos isso e depois vinculamos a isso, e o identificador é description.
Agora, esse mesmo manipulador pode ser usado para todas as entradas, mas, agora, é claro, ele
faz uma coisa: valida cada entrada pelo seu comprimento.
Agora que pode fazer sentido e
faz aqui, nenhuma entrada deve estar vazia, mas você também pode querer
alguma outra validação. Por exemplo, meu preço aqui deve ser um número maior que zero,
digamos, para que zero não seja permitido como entrada. Por outro lado, isso não é um
critério importante para outras informações. Encontraremos uma solução elegante para isso mais tarde, por
enquanto, vamos continuar com a menor validação de denominador comum que podemos aplicar a todas as entradas para garantir que elas
estejam pelo menos não vazias e vamos
nos concentrar na função redutora e em como nosso estado de forma deve mudar
quando esta ação de atualização de entrada de formulário com todos esses dados for
despachada, porque agora nada acontecerá.
Temos nosso estado inicial no redutor e isso será passado ou armazenado no estado do formulário,
mas esse estado nunca será alterado.
Bem, é por isso que despachamos uma ação, certo?
É por isso que fazemos
isso aqui, é por isso que a atualização de entrada de formulário é despachada e é por isso que queremos escrever
algum código aqui no redutor quando essa ação nos chega aqui.
Agora, se essa ação chegar até nós, no final, o objetivo é garantir que atualizemos esse instantâneo de
estado,
nosso instantâneo de estado atual adequadamente.
Isso significa que, por exemplo, precisaremos de alguns valores atualizados e, para isso, crio um novo objeto
porque meus valores de
entrada aqui, esse é um objeto e criarei um novo para substituí-lo e, antes de tudo, copiarei
o existente valores de entrada de estado.
Lembre-se de que o estado aqui é passado automaticamente, esse é o nosso instantâneo de estado atual antes
de atualizá-lo e, portanto, inicialmente, esse é o instantâneo de estado aqui, por exemplo, e terá uma chave de valores
de entrada que, por sua vez, contém
um objeto e é
exatamente isso que Estou copiando aqui, copiando todos os pares de valores-chave dessa captura instantânea de valores de entrada e, em seguida,
quero substituir o par de valores-chave pela entrada para a qual esta ação foi despachada,
o bom é que anexemos a entrada identificador para a ação. Para que possamos ir ao redutor
e substituir dinamicamente uma chave aqui nos valores de entrada copiados,
a chave é ação. entrada, é claro, esse é o nosso identificador de entrada que anexamos à ação
e o valor deve ser ação. valor,
é tudo o que precisamos fazer. Portanto, armazenamos dinamicamente o valor que foi
despachado com a entrada também atribuída dinamicamente e atualizamos nossos valores de entrada copiados.
Agora, podemos retornar um novo estado aqui, porque esse é o objetivo do seu próprio redutor, como no
redutor Redux, no final, ele deve retornar um novo instantâneo de estado e
lá eu quero copiar o estado existente, mas substituir os valores de entrada com o valor valores atualizados que copiam meus valores antigos para
que nenhum dado seja perdido e substituem um dos pares de valores-chave. Agora, obviamente, não é só substituir os
valores ou atualizar os valores, também
quero atualizar minhas validades.
Portanto, aqui estão minhas validades atualizadas e, assim como com os valores, começo copiando minha chave
de validez de entrada, porque a validez de entrada é uma chave
aqui,
como você pode ver, e quero substituir uma validade pela entrada que obtemos na ação , portanto, title, imageUrl ou o
que quer que seja e substituí-lo por ação é válido porque obtemos as informações
válidas ou não como parte da ação despachada, certo?
Estamos encaminhando isso aqui com base nessa validação básica que temos aqui.
Agora, com isso, precisamos apenas atualizar isso aqui, para que nossas
validações de entrada sejam iguais às validações atualizadas e agora apenas precisamos gerenciar a validade
geral do formulário. Para isso, adiciono uma
variável, uma variável auxiliar, o formulário é válido, que inicialmente é verdadeiro e, em seguida, percorro todas as
minhas validações atualizadas, que são
minhas validades copiadas antigas e,
em seguida, a validade atualizada para a entrada que acabamos de digitar.
Então, aqui, temos um loop for / in onde analisamos todas as chaves nas validações atualizadas e o objetivo é simples, verifico
cada validade de entrada de formulário e se todas as validações de entrada de formulário são válidas, se todas
são verdadeiras, então o total formulário é válido.
Se pelo menos um deles for falso,
o formulário geral é falso, o formulário geral não é válido. Portanto, aqui o formulário é válido é igual ao estado mais recente é o
estado válido que temos e, em seguida, a validade de validade atualizada para a entrada está sendo visualizada no momento, portanto, para esta chave
e analisando todas as entradas aqui.
A maneira como esse operador booleano funciona é tal que false substitui true; portanto, se qualquer entrada
for falsa, o formulário é válido será definido como false e não poderá ser definido como true a partir de então.
Portanto, se pelo menos uma entrada for inválida, o formulário geral será inválido e, portanto,
agora não preciso mais copiar meu estado aqui porque substituirei todo o instantâneo do
estado e o formulário definido é válido para o
meu formulário derivado é válido aqui e é claro que, para evitar confusão, também podemos nomear que este formulário atualizado é válido aqui e aqui e aqui e
aqui.
Agora, apenas uma coisa adicional, se não entrarmos nesse
bloco if, se alguma outra ação foi despachada ou qualquer outra coisa, retornarei o estado
inalterado aqui. Com isso, adicionamos
uma lógica redutora que é capaz de lidar com qualquer entrada ou digitação em qualquer uma das nossas entradas de texto, agora só
precisamos usar o estado do formulário que será alterado a cada pressionamento de tecla, exatamente
o que aconteceu antes, mas agora centralizado e mesclado em um estado gerenciado, que eu acho muito mais limpo do
que ter toneladas de estados diferentes para validade e valores. A propósito, gerenciar todos esses estados manualmente
e separadamente se tornaria um grande problema quando você deseja validar a validade geral do formulário.
Então agora podemos usar o estado do formulário que será alterado a cada pressionamento de tecla
e usá-lo, por exemplo, aqui nos valores. Retornamos o valor para esta entrada de texto acessando os valores de entrada do estado do formulário. título.
Agora, obviamente, fazemos o mesmo aqui para o imageUrl, alimentamos isso de volta. Assim, o que fizemos antes e
agora com nosso estado de formulário gerenciado com a ajuda
do redutor, o mesmo pelo preço do curso e também o mesmo pelo descrição, assim.
Agora, além de alterá-lo aqui, também precisamos alterá-lo em outros lugares, por exemplo, aqui, no
manipulador de envio, é claro. Lá, o título é válido, isso
não existe mais, mas podemos verificar o título das validades de entrada do estado do formulário, verdadeiro ou falso e, se for falso, significa que não
é válido, portanto,
essa verificação deve estar correta.
É claro que, no entanto, nos preocupamos com a validade de todas as entradas, portanto, em
vez de apenas checá-las manualmente aqui, concatenando-as em uma declaração if longa, podemos apenas verificar
se o estado do formulário é válido, pois isso significa que alguma entrada é falsa e
portanto, mostramos
esse erro, que é a verificação mais curta e, claro, também é quando queremos evitar que o formulário seja enviado.
Se o formulário for enviado, no entanto, a descrição do título e o imageUrl, que não
existem mais, serão agora o estado do formulário inputValues. title e assim por diante, então
fazemos o
mesmo aqui para a descrição e para o imageUrl. Derivamos nossos valores do estado do formulário,
o mesmo, é claro, aqui para a criação. Obtemos o título, a descrição e o imageUrl, e também, é claro, o preço
que ainda converto em um número com o sinal de mais aqui. Tiramos tudo
isso do estado da forma dos valores de entrada. Portanto, é claro que nossa dependência aqui não é título, descrição,
imageUrl e assim por diante, mas apenas estado de forma. Se o formulário indicar alterações, o que ocorrerá a cada
pressionamento de tecla, essa função deverá ser reconstruída e precisará ser reconstruída, pois as
informações usadas pela função
mudam a cada pressionamento de tecla,
a validade pode mudar a cada pressionamento de tecla, os valores desejados enviar pode mudar a cada pressionamento de tecla.
Agora também podemos, é claro, usar isso para mostrar nossa mensagem de erro. Em vez de verificar se o
título é válido
e que não existe mais, verificamos o formState. inputValidities. título, se for falso, quero mostrar este texto.
Então agora,
com isso, se salvarmos tudo isso, poderemos verificar isso. Se formos para a nossa página aqui,
vemos esse erro inicialmente.
Se eu começar a digitar, ele desaparecerá,
se eu tentar enviar isso, ele falhará porque tenho três entradas vazias.
Se eu inserir algo válido lá, por outro
lado, isso funcionará. Se eu tentar editar,
vamos tentar no Android, talvez para misturar as coisas.
Então, se eu tentar editar a camisa vermelha aqui, posso enviar isso
muito bem, agora vamos
tentar enviar isso se estiver vazio, então recebo o alerta.
Portanto, isso funciona da maneira que deve
funcionar, agora com esse gerenciamento de formulário mais elegante usando o redutor de uso e, claro, você não pode usar o
redutor de uso
ao trabalhar com formulários, este é apenas um exemplo particularmente bom para quando faz sentido mesclar
vários estados juntos e, portanto, possuem código altamente reutilizável e eficiente.
Agora ainda não terminei, porque toda essa repetição de código com as entradas aqui, sempre estruturadas
da mesma maneira e com as possibilidades de personalização ausentes em relação à validação, são essas as coisas
que quero abordar a seguir.