Agora, com essa ação sendo despachada, podemos ir ao redutor e escrever algum código aqui na alteração de entrada, e esse
é um código muito simples.
Retornamos um novo estado em que copio meu antigo estado e desejo atualizar o valor com a ação. value porque value é uma propriedade que tenho nesta ação,
a outra é isValid e essa é a outra coisa que também quero atualizar
a cada pressionamento de tecla, isValid para esta entrada, não para todo
o formulário, mas para essa entrada gerenciada internamente. Não atualizarei o que foi tocado aqui; em vez disso, o tocado deve
ser atualizado quando realmente perdermos o foco, porque isso significa que o usuário acabou de inserir o
conteúdo no momento. Portanto, agora eu quero marcar isso como tocado e, possivelmente, mostrar erros de validação. Portanto, aqui, o manipulador de foco perdido é uma
função que eu adiciono e lá, enviarei uma
ação. Agora, criarei
um identificador de ação aqui, desfoque
de entrada como este, desfoque de entrada como este e agora podemos despachar desfoque de entrada aqui, não precisamos anexar nenhum dado e agora em nosso redutor, podemos usar
que em outro caso, input blur e, se for esse o caso, retorno um novo estado em que copio o
estado antigo, porque quero manter o valor e é válido e não alterar
isso, mas quero definir como true, para que assim seja quando desfocamos uma entrada, ela é tratada como tocada.
Agora, apenas precisamos conectar esta função, portanto, definirei o ouvinte onBlur aqui e apontei o manipulador de foco perdido, para que isso
seja acionado quando essa entrada ficar embaçada.
Agora isso é legal e isso gerenciará o estado dentro dessa entrada, é claro que
ainda preciso encaminhar o valor e as informações, sejam válidas ou não,
para meus pais, portanto, para a tela de edição de produtos. Portanto, o que podemos fazer é adicionar efeito de uso aqui como uma importação
no
componente de entrada e talvez adicioná-lo aqui e na função de efeito de uso. Quero chamar uma função que espero obter por meio
de adereços, talvez na alteração de entrada, O nome é sua e apenas executarei isso e encaminhará meu valor de estado de entrada e meu estado de entrada é uma informação
válida, para que no componente pai possamos adicionar uma função aqui que ouça no final, que é acionada,
que recebe esses dois argumentos e depois no pai, para que no componente
de tela possamos atualizar nosso estado lá. Agora, o importante é quando esse efeito de uso deve
ser executado e não deve ser executado após cada pressionamento de tecla? Em vez disso, isso deve ser executado sempre
que o valor do estado de entrada ou as alterações válidas, é claro, porque é disso que dependemos ou para ser mais preciso, podemos enviar
essas informações apenas se o estado de entrada tocado for verdadeiro, caso contrário, o componente pai pode não se importar.
Portanto, agora nossa dependência aqui é todo o estado de entrada, porque usamos todos os valores, mas ainda assim
acionaremos essa função no componente pai se tocado for verdadeiro; portanto, esse efeito será executado com
mais frequência, mas na maioria das vezes não fará nada desde que o toque não seja verdadeiro e os adereços,
claro, também sejam nossa dependência, agora, para evitar um loop infinito de renderização aqui, podemos usar a sintaxe de desestruturação do objeto e
usar a alteração de entrada, para que, se outros adereços mudarem, não o façamos. reafirmar esse efeito, porque na mudança de entrada é o
que precisamos lá em baixo e agora podemos acrescentar que isso é uma dependência e outras coisas, outras
alterações nos acessórios não acionarão isso.
Então agora chamamos isso no componente pai sempre que isso é tocado e depois encaminhamos o valor e a
validade dessa entrada para o componente pai.
Então, agora vamos usar isso na tela de edição do produto. Lá, em nossas entradas, como na entrada do título, podemos adicionar
o suporte de alteração de entrada e esse é o suporte que eu alvo aqui, então você precisa acertar essa
nomeação e isso espera obter uma função como um valor que, por sua vez, receberá
dois argumentos quando chamado - o valor e a validade dessa entrada.
Então, aqui eu quero apontar para uma função e essa pode ser nossa, digamos, manipulador de alterações de entrada, podemos reciclar
isso, apenas o renomeio para ser mais adequado.
Portanto, o manipulador de alterações de entrada pode ser acionado aqui, assim, ainda quero passar meu identificador, porque
quero reutilizar isso para todas as minhas entradas e agora que
estou no componente de tela, teremos várias entradas e , obtemos nosso identificador e obtemos o valor e as
informações válidas, certo?
Então, valor de entrada e validade de entrada, é o que obtemos, certo, porque é
o que encaminhamos de dentro do componente de entrada aqui,
é o que passamos para
isso na função de alteração de entrada. Portanto, aqui, não precisamos validar, precisamos apenas encaminhar essas informações. Encaminhamos o valor de entrada, encaminhamos a validade da
entrada e isso só acontece quando a entrada é tocada pelo caminho. Portanto, quando ela perde o foco e, é claro, isso
é
apenas uma restrição que
adicionei aqui, você precisa perder o foco. Obviamente, você também pode ir para o
componente de entrada e removê-lo se verificar para atualizar a validade e o valor no componente
pai para cada entrada, para cada pressionamento de tecla. Agora, mais uma coisa que quero fazer, quero agrupar
isso em uma chamada de retorno de chamada de uso aqui, para que esta função não seja reconstruída desnecessariamente porque lembre-se de que passamos essa
função para a alteração de entrada no componente de entrada e lá por outro lado, isso é
uma
dependência desse efeito; portanto, esse
efeito será executado novamente sempre que isso mudar.
Portanto, não deve mudar com muita frequência para evitar execuções desnecessárias de efeitos
e, portanto, precisamos declarar nossas dependências, e a única dependência que temos é o estado do formulário
de despacho que nunca será alterado, portanto,
somos
bons, isso nunca deve ser reconstruído porque o lógica
lá não muda, obtemos todos os valores que precisamos como argumentos. Com isso na minha tela de edição de produtos, ainda tenho meus formulários que, é claro, com todos os valores e validades dos formulários, mas eu apenas gerencio
isso aqui porque eu preciso enviá-lo mais tarde e porque eu preciso derivar a validade geral do formulário. Não faço isso porque preciso
gerenciar todas as entradas aqui, fazemos
isso de dentro do componente de entrada. Para envio e assim por
diante, ainda
precisamos das informações sobre todas as lojas, no entanto, o valor. Agora, se eu voltar para a entrada, não esqueça que você também precisa definir o valor
inicial prop e se esse valor deve
ser inicialmente válido; portanto, se eu voltar para a tela de edição do produto, agora definiremos o valor inicial aqui para que?
Bem, podemos verificar se temos um produto editado e, se tivermos, o valor inicial aqui deve
ser editadoProduct. title,
caso contrário, é uma string vazia e isso deve ser válido inicialmente; portanto, use este
prop aqui se tivermos
um produto editado; se
for, com o double bang aqui, se for verdade. Se não temos um produto editado, isso não pode ser válido inicialmente,
então
passo falso o que é
bom, e é exatamente o que deve ser o caso.
Agora podemos copiar essas duas linhas, também para o imageUrl, é claro que encaminhamos o valor do URL da
imagem como um valor padrão, além disso, ele pode permanecer assim. Para o preço, nunca teremos um valor inicial
e nunca será válido inicialmente. Para descrição, por outro lado, podemos
novamente adicionar isso e aqui apontar para descrição.
Agora, com isso, há uma coisa que eu preciso corrigir no componente de entrada que também pensei, é claro que
aqui, o estado do formulário não está mais disponível. Em vez disso, temos
nosso estado interno aqui e nomeei esse estado de entrada, que é o que
meu redutor retorna, então devemos
usá-lo aqui, é claro.
Então aqui temos inputState. valor como um valor, é tão simples
quanto isso e aqui temos inputState. isValid como uma verificação e isso deve ser tudo.
Agora, se salvarmos isso e dar uma olhada nisso, vamos ver se isso funciona. Se formos aqui, temos todas as mensagens de erro
inicialmente, o que faz sentido, porque todas são inválidas inicialmente.
Se eu começar a digitar aqui, recebo um erro, não consigo encontrar a variável isValid no meu componente de entrada, que
deve estar em aquele manipulador que dispara a cada pressionamento de tecla, provavelmente aqui, sim no redutor, é claro que
devo verificar a ação.
isValid, não apenas isValid, tenho que
obter isso da ação. Portanto, com essa correção
aqui, vamos voltar e tentar novamente. Se eu começar a digitar, isso será
limpo. Se eu reverter isso, meu erro não volta, portanto, é um
pequeno erro que precisaremos corrigir. Pelo preço, 0 não é
tratado como válido, também não é, portanto, a validação tem alguns
problemas, mas entrar e assim por diante funciona,
mas vamos ver o que há de errado com a validação agora.
Bem, é claro que a validação funciona aqui, não a estamos usando.
Lembre-se de que eu sempre verifico se esse tipo de validação está ativado para essa entrada ou esse tipo ou esse tipo e fazemos
isso com a ajuda desses acessórios especiais que precisamos definir. No momento, nenhuma validação
está ativada, portanto, apenas os valores inválidos padrão são levados em consideração.
Portanto, se eu for para a tela de edição do produto, agora habilitaremos essa validação especial definindo os
adereços certos, por exemplo aqui na entrada do título, necessários. No imageUrl, também necessário. No preço aqui, obrigatório e também talvez
min igual a zero, de modo que zero é o número mínimo que precisamos inserir ou um
número
maior que isso, na verdade, talvez 0. 1 é o nosso número mínimo. Para a descrição, também deve ser necessário e talvez também o comprimento
mínimo seja igual a 5, para ter pelo menos 5 caracteres. Há também uma coisa adicional que precisamos fazer aqui na tela
de edição do produto. Isso, no manipulador de alterações de entrada, também precisa ser adicionado a todas as entradas,
é claro, não apenas à entrada do título. Portanto, precisamos adicionar isso para o
imageUrl, caso contrário, obteremos um erro mais tarde, precisaremos adicionar isso aqui à entrada de preço, também precisaremos adicionar isso aqui, obviamente, à entrada
de descrição e substituir o identificador no caminho certo.
Então, vamos testar isso e você notará algo estranho,
se você digitar aqui, que funciona, se você
digitar imageUrl, não funcionar corretamente,
a validação não será atualizada e você não poderá voltar, pelo menos isso pode estar preso.
Portanto, se recarregarmos isso com erro de comando ou pressionar duas vezes R no Android e fizermos outra tentativa aqui,
digamos que o preço que você notará que isso funciona, mas por que não funciona
e o mesmo seria o caso, a propósito? se você tentou
no imageUrl, aqui isso funciona. Por que funciona se eu editei outra entrada anteriormente,
porque agora, por exemplo, não funciona mais em um título? E o problema está relacionado a isso estar preso aqui.
Estamos renderizando esse componente com muita frequência e é muito difícil rastrear o motivo disso.
No final, temos uma espécie de loop infinito
aqui e o problema é nosso manipulador de alterações de entrada.
Estamos usando o retorno de chamada aqui para evitar recreação desnecessária, mas, ao vinculá-lo dessa maneira, tornamos
isso obsoleto, não fazendo diferença agora, pois isso criará uma nova ligação de função para cada
ciclo de repetição.
Portanto, no final, o que precisamos fazer é remover o bind aqui, removê-lo aqui em todos esses lugares,
pois isso interromperá nosso
aplicativo, causará muitos ciclos de re-renderização, pois o retorno de chamada não terá efeito
e, em vez disso, poderemos deseja encaminhar um ID prop
do título e assim por diante para o nosso componente de entrada.
Então, vamos adicionar isso em todas essas entradas, esse prop ID é basicamente o que eu adicionei na chamada de ligação antes, então apenas
encaminhamos isso para o componente de entrada para que possamos usá-lo lá, vamos fazer
isso para todas essas entradas aqui e agora como podemos usar isso?
Bem dentro da entrada, agora temos esse suporte de ID
disponível, para que possamos anexar isso.
Então aqui podemos encaminhar adereços. id ou simplesmente ID, para que não tenhamos que adicionar adereços aqui
e, em vez disso, retire o ID dos adereços aqui, exatamente como fizemos na alteração de entrada e adicione
o ID como uma dependência desse efeito posteriormente. E agora, com isso, ainda encaminhamos o identificador
dessa entrada, mas de uma maneira mais elegante, que evita o uso de bind,
que no final recria essa função para cada ciclo
de renderização e, portanto, leva a um loop infinito; portanto, agora, se
recarregarmos isso e vá para a seção de administração aqui, agora eu posso inserir algo aqui e também aqui e agora isso funciona porque agora
evitamos esse ciclo infinito de renderização e obtemos a validação como desejávamos.
Portanto, agora essa é a minha abordagem ou a abordagem que eu queria mostrar aqui, que você pode usar para ter
um componente de entrada reutilizável que faça sua própria validação, que você pode configurar de fora e onde
você ainda pode gerenciar o formulário geral.
Com isso, vamos nos aprofundar em
alguns ajustes, como, por exemplo, estilizar essa mensagem de erro que estamos exibindo, essa mensagem de erro de validação e também
controlar quando a exibimos, porque não quero mostrar isso o tempo todo.