Agora, direi que analisaremos detalhadamente como trabalhar com a entrada do usuário e assim por
diante em um módulo separado no próximo módulo do curso, portanto, não vou mergulhar profundamente nisso agora.
A única coisa que quero fazer agora é adicionar uma entrada de texto aqui na tela de edição
do produto e, em seguida, enviar algumas entradas de texto aqui que nos permitem buscar a entrada do usuário e,
no final, permitir adicionar ou editar o produto sem nenhuma validação ou qualquer coisa especial lá.
Então, eu também importarei uma visualização de rolagem, porque começarei agrupando tudo com uma visualização de rolagem,
porque você certamente poderá visualizá-la em um dispositivo pequeno ou no modo
paisagem, onde nem tudo se encaixa em uma única tela. Agora, teremos algumas visualizações com as diferentes entradas de texto; portanto, aqui sempre teremos um
texto com um rótulo, como o título do produto no qual você deve inserir e, abaixo disso, uma entrada
de texto que permite você deve inserir este título e, no final, repetirei isso para todas as coisas diferentes que você
deseja adicionar.
Agora, será necessário
algum estilo; portanto, aqui para a entrada de texto, adicionarei um estilo de entrada e,
no texto acima, adicionarei um rótulo de estilo de estilos, você
também pode dar a essa visualização um estilo geral de formulário controle, por exemplo, o que
você quiser nomeá-lo e agora podemos repetir isso para o título, para o imageUrl aqui, para o preço e também por
último, mas não menos importante, para a descrição. Também vou agrupar essas coisas de maneira geral em
outra visualização, para que todos esses controles de forma no final sejam apresentados como estilos de estilos.
Agora é hora de trabalhar nesses estilos
aqui, então lá na folha de estilo, para o formulário, defino uma margem de 20 em todas as direções,
para que haja algum espaçamento em torno dessas entradas. Para minhas entradas aqui, para o rótulo e a entrada
do controle de formulário, também quero adicionar alguns estilos, então aqui terei o controle de formulário, meu rótulo e também a própria entrada, para que o próprio
texto seja inserido e para o controle de formulário , Desejo definir uma largura de 100 para garantir que
essa seja a maior possível. Para o rótulo, defino
a família da fonte como sans bold (realce) para ter algum texto em negrito aqui e,
em seguida, uma margem vertical 8 para ter algum espaçamento na parte superior e inferior
e para a entrada em si
que é esse elemento de entrada de texto, desejo ter um preenchimento horizontal de dois, um
preenchimento muito pequeno para que, quando inserimos texto, não fiquemos diretamente na borda da entrada e um preenchimento vertical de
5, portanto, um preenchimento pequeno na parte superior e inferior e uma borda inferior cor dessa aparência levemente acinzentada com este código hexadecimal de ccc e, em seguida, uma largura inferior da borda
de um e esse é o estilo que vou usar agora. Agora, se dermos uma olhada nisso, vá para admin e, por exemplo, adicione
um novo, é assim que parece, não parece tão ruim,
certamente não configurado de forma alguma, mas alguns para começar e, é
claro, agora quero poder enviar e salvar também.
Para isso, na tela
de edição do produto, eu quero ter um botão de ação, então um botão no cabeçalho; portanto, aqui antes dos estilos, talvez, a ordem não importa, mas
eu gosto de tê-lo ao lado do componente. adicione as opções de navegação onde eu preciso dessa sintaxe dinâmica, porque
precisamos fazer algo dinâmico a partir do cabeçalho e, em seguida, retornamos o objeto de configuração onde, por
um lado, você pode definir o título do cabeçalho e que também deve ser dinâmico, porque ,
Quero mostrar se estamos editando ou adicionando, isso dependerá do fato de termos ou não um parâmetro de ID
do produto, para que possamos acessar o navData. navegação. getParam.
Agora, se você der uma olhada na tela do produto do usuário, notará que,
quando clicamos no botão de edição, passamos o parâmetro de ID do produto aqui para editar a navegação do produto, quando clicamos no ícone de adição no
cabeçalho
, não passamos por isso.
Portanto, o parâmetro ID do produto, se disponível, sabemos que estamos no modo de edição.
Portanto, aqui posso verificar se podemos obter um valor para isso e se isso é
verdadeiro, mostro editar produto como um
título; caso contrário, mostro adicionar produto, porque esse é um indicador claro para mim, esteja editando ou adicionando.
Porém, o título do cabeçalho não é tudo o que
deve fazer parte da
configuração. Também quero que esse cabeçalho esteja certo para ter um botão que permita salvar meus dados
e, para isso, vou para a tela de produtos do usuário e copio essa
configuração eu tenho lá com os botões de cabeçalho, copie isso para a tela de edição do produto e, claro, também
copie as importações de botão de cabeçalho e botões de cabeçalho e item para editar a tela do produto e adicione isso aqui e agora, é claro, nós É
necessário ajustar um pouco isso, porque certamente um botão de adição não faz sentido aqui,
o save parece ser um rótulo mais apropriado e o ícone que eu quero usar, portanto, é md checkmark e iOS,
que renderiza um bom ícone de marca de seleção. É claro que aqui também não quero navegar para
editar o produto, mas, em vez disso, quero enviar meu formulário e é nisso que trabalharemos em um segundo.
Primeiro, precisamos garantir que possamos salvar todas as informações do usuário e
que também preencheremos esse formulário no caso de estarmos editando. Portanto, para salvar a entrada do usuário, podemos usar o gancho de
estado de uso do React e simplesmente gerenciar
o estado de cada uma dessas entradas de texto; portanto, teremos
quatro estados aqui no final com o estado de uso, cada um inicializado em uma sequência vazia inicialmente
e então temos o título e definimos o título e repetimos que basicamente temos também como imageUrl e definimos imageUrl e, aqui, temos
o preço
e o preço definido, e aqui também temos a descrição e a descrição do conjunto. no próximo módulo, onde nos
aprofundamos no tratamento da entrada do usuário.
Por enquanto, vincularei isso à minha entrada de texto, o valor aqui está vinculado ao título desta primeira, que é
a minha entrada de título e, ao alterar o texto aqui, recebo meu texto aqui que mudou e salvarei isso de volta em defina o título nesse caso aqui, para que
eu atualize meu estado de título com o texto do título recém-inserido. E agora é esse padrão que adicionamos a todas
essas entradas de texto aqui, é claro
que, na segunda, estamos falando sobre o imageUrl e definindo imageUrl, mas, além disso,
é o mesmo. Pelo preço, surpreendentemente,
devolvemos o preço e chamamos preço definido, mas, além disso, é o mesmo.
Observe que, portanto, é claro que o preço também é gerenciado como uma
string aqui, porque o que o usuário digita sempre é texto e aqui para a entrada de texto, passarei minha descrição e definirá minha descrição
aqui.
Com isso, os dados são gerenciados, agora para preencher previamente que, quando temos uma receita, quando estamos carregando um produto e estamos no
modo de edição, precisamos apenas obter nosso ID do produto com a ajuda da navegação de adereços para obter parâmetros. , o ID do
produto é um parâmetro que podemos corrigir para recuperar e, se o ID do produto estiver definido, sei que estamos no
modo de edição e, é claro, quero preencher previamente meus campos aqui com os valores.
Agora, na verdade, isso significa que eu quero carregar meu produto com base no ID do produto do meu estado Redux.
Portanto, importamos o seletor de uso do React Redux aqui e agora aqui, podemos obter nosso produto editado entrando em contato com o seletor de uso para o nosso estado Redux e agora aqui, é claro, precisamos mergulhar em nossa fatia de produto e
você sempre pode verificar o seu redutor, se você não tiver
certeza de como foi estruturado novamente e lá, vemos nos produtos parte de nosso redutor, de
nossa loja Redux, devo dizer, temos esse conjunto de produtos de usuário no final, então
é isso que estou interessado aqui, estendo a mão para produtos de usuários
e agora quero
encontrar o produto com esse ID de produto. Então, aqui, darei uma olhada em todos os
produtos, a função find faz isso por mim e quero retornar true se o ID
do produto que estou vendo for igual ao ID do produto que recuperei dos meus parâmetros.
Agora, é claro, às vezes isso não renderá nada se o ID do produto
não estiver definido, porque esse parâmetro não está definido, como sempre acontece quando clicamos neste botão de adição; esse
parâmetro nunca será definido, mas tudo bem. Portanto, o produto editado será simplesmente indefinido, o que é totalmente bom. Caso contrário, se o produto
editado não estiver indefinido, se estiver definido, sabemos que estamos no modo de
edição e, portanto, podemos preencher previamente nossos valores. Portanto, na verdade, eu faço isso antes de inicializar meu estado,
porque é algo que eu quero inicializar, dependendo de termos carregado ou não um produto.
Portanto, o título aqui, na verdade, lá vou verificar se o produto editado, se está definido, se
estiver definido, inicializarei o título a ser editadoProduct. title, caso contrário, será uma
string vazia e terei a mesma lógica para o imageUrl aqui.
Então, aqui faço isso para o imageUrl, não para o preço, porque o preço não deve ser alterável, mas
farei isso para a descrição.
Portanto, o valor padrão do título, imageUrl e descrição depende
se temos ou não um produto editado. E agora, como definimos isso no estado, isso será
automaticamente alimentado em nossas entradas de texto e a única coisa é que preciso remover
a entrada de preço aqui, se estivermos no modo de edição. Portanto, vou verificar se o produto editado está definido aqui e, se
for esse o caso, retornarei
nulo aqui e, caso
contrário, se não estiver definido, se estiver no modo de adição, não no modo de edição, processarei isso entrada de preço aqui, para que
a entrada de preço seja removida se estivermos editando porque não consigo editá-la de qualquer maneira.
Então agora, com isso, vamos tentar e voltar à tela do administrador. Se eu clicar em adicionar, sim, preciso adicionar novamente a importação
da plataforma, porque estou usando isso no botão de cabeçalho para renderizar a marca de
seleção, os ícones dependendo da plataforma.
Então, certifique-se de importar a plataforma na tela de edição do produto, mas agora, se clicar em adicionar,
vemos todas as quatro importações, todas vazias no início. Se eu clicar em editar, por outro lado, eles são
pré-preenchidos e não vejo a entrada de preço exatamente o que eu quero.
Agora é hora de garantir que, quando enviarmos isso, atualizemos nosso
produto se estivermos editando ou se estivermos adicionando, estamos adicionando um novo produto.
Agora, novamente, por enquanto não adicionarei nenhuma validação, faremos isso mais tarde.
Portanto, por enquanto, também podemos enviar um produto vazio, depois do próximo módulo, isso
não será mais possível.