1
00:00:02,530 --> 00:00:05,110
Então, de que outra forma podemos otimizar isso?

2
00:00:05,110 --> 00:00:11,350
Bem, você pode notar que esse código jsx aqui no final pode ser repetido várias vezes, cada entrada se

3
00:00:11,360 --> 00:00:12,590
parece com isso.

4
00:00:12,640 --> 00:00:18,130
Temos uma visão, temos um rótulo com a própria entrada de texto e também podemos querer algum texto de erro

5
00:00:18,130 --> 00:00:19,140
que possamos exibir.

6
00:00:19,270 --> 00:00:22,900
Portanto, faria sentido terceirizar isso em um componente separado e é

7
00:00:22,990 --> 00:00:25,370
exatamente isso que eu quero fazer.

8
00:00:25,480 --> 00:00:32,230
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

9
00:00:32,230 --> 00:00:38,410
importo o React naturalmente, e depois importo algumas coisas do React Native e essas coisas

10
00:00:38,410 --> 00:00:45,460
no final são minha visualização, componente de texto, componente de entrada de texto e folha de estilo porque

11
00:00:45,460 --> 00:00:54,210
eu ' Também precisamos disso do React Native e, com isso aqui, podemos criar o componente de entrada aqui que obtém props

12
00:00:54,210 --> 00:01:01,410
e precisa retornar algum jsx. Teremos um objeto de estilos com a Folha de estilo. criar e, claro,

13
00:01:02,780 --> 00:01:08,230
no final, exportamos isso como padrão aqui, esse componente.

14
00:01:08,340 --> 00:01:18,420
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

15
00:01:18,440 --> 00:01:23,890
e essa mensagem de erro separe, retire-a daqui, saia da tela de edição

16
00:01:24,250 --> 00:01:32,700
do produto e mova-a isso na tela de entrada e lá, use-o como um valor de retorno no componente de entrada aqui.

17
00:01:32,740 --> 00:01:37,210
Agora, é claro, precisaremos ajustar isso um pouco, mas esse é o nosso esqueleto geral que eu quero

18
00:01:37,210 --> 00:01:37,720
usar lá.

19
00:01:37,960 --> 00:01:42,720
Agora, também na tela de edição do produto, eu escolho

20
00:01:42,770 --> 00:01:49,270
o estilo. Nesse rótulo de controle de formulário e estilo de entrada, todos podem ser removidos

21
00:01:49,270 --> 00:01:55,440
e devem ser movidos para o componente de entrada e para a folha de estilo.

22
00:01:55,460 --> 00:02:00,740
Portanto, agora com isso, é claro, isso só pode ser usado para um título e eu quero criar

23
00:02:00,740 --> 00:02:07,580
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

24
00:02:07,710 --> 00:02:10,830
isso espero coloque isso em um suporte chamado label talvez.

25
00:02:13,740 --> 00:02:18,420
Em geral, também quero ter certeza de que a entrada de texto possa ser configurada

26
00:02:18,420 --> 00:02:25,800
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

27
00:02:25,800 --> 00:02:31,060
entrada possamos definir coisas como o tipo de teclado, porque eu não quero codificar isso aqui, em

28
00:02:31,070 --> 00:02:31,570
vez

29
00:02:31,570 --> 00:02:36,720
disso, deve ser um invólucro reutilizável em torno do componente de entrada de texto que pode ser

30
00:02:36,720 --> 00:02:37,570
configurado de fora.

31
00:02:37,800 --> 00:02:43,990
Portanto, essas configurações aqui, por exemplo, eu as cortarei daqui para que possamos defini-las de fora, também me livrarei

32
00:02:44,010 --> 00:02:46,530
desses ouvintes porque realmente não precisamos deles.

33
00:02:52,130 --> 00:02:57,230
O texto do erro aqui também deve ser definido de fora, portanto, vou verificar o texto do

34
00:02:57,230 --> 00:02:58,640
erro dos adereços aqui e,

35
00:02:58,640 --> 00:03:02,720
é claro, você pode sempre dar a esses adereços os nomes que desejar,

36
00:03:02,720 --> 00:03:07,570
é claro que também precisaremos alterar o que designamos aqui como valor e assim por diante,

37
00:03:07,570 --> 00:03:08,800
isso também mudará.

38
00:03:09,350 --> 00:03:11,720
Mas agora já podemos começar a usar

39
00:03:11,720 --> 00:03:23,200
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

40
00:03:23,200 --> 00:03:27,210
usuário e de entrada, e então nós pode começar a usar o

41
00:03:27,550 --> 00:03:32,770
componente de entrada no local em que eu anteriormente tinha meu componente de entrada de

42
00:03:32,770 --> 00:03:33,910
texto aqui.

43
00:03:34,000 --> 00:03:40,510
Então, apenas adicionarei entrada e, agora, na entrada, podemos adicionar a configuração que eu corto, como o tipo de teclado e

44
00:03:40,510 --> 00:03:43,000
assim por diante, porque isso será encaminhado.

45
00:03:43,180 --> 00:03:50,950
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

46
00:03:51,550 --> 00:03:55,470
tudo o que faremos em relação à validação, mas é um começo.

47
00:03:55,510 --> 00:03:57,250
É assim que podemos usar essa

48
00:03:59,130 --> 00:04:02,970
entrada e, é claro, também é assim que agora podemos usá-la para substituir as outras entradas.

49
00:04:02,970 --> 00:04:11,400
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

50
00:04:11,400 --> 00:04:17,910
teclado esteja correto, a correção automática de capitalização automática não é necessária, digite a chave de retorno

51
00:04:17,910 --> 00:04:18,480
em

52
00:04:18,480 --> 00:04:23,070
seguida, podemos deixar isso, não estamos fazendo qualquer coisa com isso, poderíamos

53
00:04:23,070 --> 00:04:29,990
adicionar alguma lógica, mas não estou fazendo isso aqui. Para o preço, deixarei a renderização condicional, mas lá, posso

54
00:04:33,510 --> 00:04:42,300
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

55
00:04:42,330 --> 00:04:49,380
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

56
00:04:49,380 --> 00:04:58,740
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

57
00:04:58,980 --> 00:05:05,700
automática, no entanto, não definirei um tipo de chave de retorno, mas aqui Eu

58
00:05:05,700 --> 00:05:14,330
quero definir várias linhas assim, o que permite a edição de várias linhas e o número de linhas,

59
00:05:14,330 --> 00:05:15,830
digamos três.

60
00:05:15,830 --> 00:05:20,630
No entanto, isso é usado apenas pelo Android, mas lá, ele restringirá o número de linhas que você

61
00:05:20,630 --> 00:05:25,580
pode inserir; no iOS, isso não terá efeito, mas é assim que agora você pode usar esse componente de

62
00:05:25,580 --> 00:05:27,470
entrada e ainda configurá-lo de fora.

63
00:05:27,470 --> 00:05:30,240
Dito isto, como eu disse, ainda

64
00:05:30,260 --> 00:05:35,710
não terminamos, e o valor e esse ouvinte de alteração de texto?

65
00:05:35,840 --> 00:05:42,030
Existem diferentes maneiras de como você pode lidar com essa entrada de texto ou com os valores de texto aqui.

66
00:05:42,050 --> 00:05:47,960
Você ainda pode simplesmente encaminhá-lo para o componente pai e usar esse componente de entrada apenas como invólucro

67
00:05:48,080 --> 00:05:49,020
visual, mas

68
00:05:49,310 --> 00:05:55,850
irei um pouco mais além e quero gerenciar esse valor e a validade dessa entrada única dentro do componente de entrada,

69
00:05:56,180 --> 00:05:58,460
para que Em seguida, só relato de

70
00:05:58,460 --> 00:06:05,280
volta ao meu componente pai, para a tela de edição do produto, no final, qual é o valor atual e se é

71
00:06:05,280 --> 00:06:07,900
válido ou não, para que a validação não

72
00:06:07,940 --> 00:06:11,980
precise acontecer dentro do componente pai, mas novamente que está totalmente funcionando para

73
00:06:12,170 --> 00:06:17,480
você, se você quer fazer isso ou não. Aqui, adicionarei uma nova constante no componente

74
00:06:17,480 --> 00:06:25,520
de entrada, manipulador de alteração de texto, onde recebo esse texto de entrada, porque agora é isso que vinculo ou

75
00:06:25,550 --> 00:06:31,400
o que já está vinculado e, geralmente, vou mantê-lo assim, embora não precisemos do

76
00:06:31,400 --> 00:06:33,380
identificador aqui mais, não precisa

77
00:06:33,620 --> 00:06:39,560
de ligação, portanto, porque isso está dentro de uma única entrada, não precisamos de um

78
00:06:39,560 --> 00:06:40,810
identificador lá.

79
00:06:40,880 --> 00:06:44,150
Isso agora será acionado a cada pressionamento de tecla

80
00:06:44,150 --> 00:06:56,140
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

81
00:06:56,140 --> 00:07:02,270
de uso ou criados com o estado de uso, mas eu irei para um redutor

82
00:07:02,300 --> 00:07:03,920
e aqui tenho meu

83
00:07:04,090 --> 00:07:12,300
redutor de entrada, o nome é com você, obtém o estado, obtém um ação e retorna um novo estado no

84
00:07:12,300 --> 00:07:13,110
final.

85
00:07:13,440 --> 00:07:20,390
Então aqui na entrada, eu posso chamar use reducer e encaminhar ou configurá-lo para o redutor de entrada e meu estado inicial

86
00:07:20,550 --> 00:07:28,200
para esta entrada aqui será um objeto Javascript simples com três valores. O valor que você possui atualmente, que inicialmente pode estar

87
00:07:28,260 --> 00:07:34,470
vazio, mas na verdade eu quero me permitir definir um valor inicial de fora, porque precisaremos

88
00:07:34,470 --> 00:07:37,230
disso, por exemplo, quando estivermos editando produtos,

89
00:07:37,260 --> 00:07:41,570
por isso, verifico se o valor inicial de adereços está definido

90
00:07:41,610 --> 00:07:43,700
, novamente, é claro que

91
00:07:43,700 --> 00:07:46,980
esse é um nome que você pode escolher

92
00:07:46,980 --> 00:07:49,220
da maneira que desejar e, se

93
00:07:49,230 --> 00:07:50,040
for

94
00:07:50,130 --> 00:07:53,460
esse o caso, definirei isso como valor inicial, caso

95
00:07:53,460 --> 00:08:03,600
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,

96
00:08:03,630 --> 00:08:05,160
digamos que esteja definido.

97
00:08:05,160 --> 00:08:08,780
Se for esse o caso, aceitarei automaticamente o valor que

98
00:08:08,790 --> 00:08:11,750
deve ser verdadeiro ou falso; se não

99
00:08:13,420 --> 00:08:16,440
for o caso, isso será tratado automaticamente como

100
00:08:16,450 --> 00:08:23,170
falso e também gerenciarei se isso foi tocado ou não, para que o usuário realmente digitou aqui e isso

101
00:08:23,260 --> 00:08:26,850
pode ser útil para nos ajudar a fornecer uma melhor

102
00:08:27,100 --> 00:08:33,760
experiência do usuário em relação a quando mostramos erros de validação e aqui configurarei isso como false inicialmente.

103
00:08:33,780 --> 00:08:40,260
Agora, é claro, isso nos devolverá o instantâneo do estado de entrada e uma função de despacho,

104
00:08:40,260 --> 00:08:46,920
que eu também posso nomear despacho, porque não teremos conflito de nomes e, no manipulador de alterações

105
00:08:46,920 --> 00:08:54,420
de texto, é claro que despacharei uma ação, uma ação que, portanto, criará aqui com um identificador de ação, alteração

106
00:08:54,420 --> 00:09:00,040
de entrada, por exemplo, que deve ser despachada aqui, digite change de entrada e,

107
00:09:00,040 --> 00:09:08,930
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

108
00:09:08,960 --> 00:09:16,150
entrada de caso , queremos fazer alguma coisa. No caso padrão, retornarei apenas meu

109
00:09:16,190 --> 00:09:22,400
estado, portanto não farei nada, mas aqui, é claro, quero fazer outra coisa.

110
00:09:22,630 --> 00:09:27,730
Agora, aqui no manipulador de alterações de texto, obviamente envio a alteração de entrada e desejo encaminhar

111
00:09:27,760 --> 00:09:29,320
o valor que armazenei em

112
00:09:29,410 --> 00:09:35,320
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

113
00:09:35,350 --> 00:09:39,550
a entrada ser válida ou não. . E, para isso, em anexo,

114
00:09:39,570 --> 00:09:45,040
você encontra alguma configuração de validação ou algum código de validação, que eu mostrarei agora.

115
00:09:45,210 --> 00:09:50,760
Aqui eu tenho uma constante que configura uma expressão regular de email, portanto, uma expressão regular que

116
00:09:50,760 --> 00:09:52,710
nos permite validar endereços de

117
00:09:52,710 --> 00:09:58,290
email, ainda não temos entrada de endereço de email, mas mais tarde, quando adicionarmos autenticação, teremos isso e

118
00:09:58,290 --> 00:10:00,670
então eu quero poder para usar esse

119
00:10:00,780 --> 00:10:04,580
componente de entrada, esse componente deve estar preparado para também validar emails.

120
00:10:04,740 --> 00:10:10,140
Então eu tenho a variável auxiliar válida aqui, porque temos várias verificações aqui.

121
00:10:10,140 --> 00:10:16,610
Agora, quero garantir que possamos definir os critérios que queremos usar de fora com a ajuda de adereços, por exemplo, verifico

122
00:10:16,620 --> 00:10:21,030
se um adereço necessário está definido, se está definido como verdadeiro, se está definido

123
00:10:21,030 --> 00:10:26,610
e se Nesse caso, essa verificação será realizada. Se o suporte necessário não estiver definido, essa verificação

124
00:10:26,610 --> 00:10:31,620
não será executada e, portanto, essa validação não será executada, e é o caso de

125
00:10:31,620 --> 00:10:33,870
todas as minhas validações diferentes aqui.

126
00:10:34,080 --> 00:10:40,180
Portanto, podemos definir um suporte necessário para verificar se não está vazio, se está vazio, configuramos como válido.

127
00:10:40,440 --> 00:10:46,140
Podemos definir um suporte de email no componente de entrada para validá-lo por ser um endereço de email válido e,

128
00:10:46,320 --> 00:10:48,330
se não for, configuramos como false.

129
00:10:48,450 --> 00:10:55,260
Podemos verificar um número por ser muito pequeno ou muito grande ou uma string por ser muito curta

130
00:10:55,260 --> 00:10:56,070
com o

131
00:10:56,070 --> 00:11:01,950
validador de comprimento mínimo e, é claro, você pode adicionar mais lógica aqui, possivelmente também

132
00:11:01,950 --> 00:11:09,800
com um pacote como ValidateJs, que eu já mencionei anteriormente. Agora com isso, terei é válido no final, o que é verdadeiro

133
00:11:09,940 --> 00:11:16,520
por padrão, mas falso assim que uma validação falha e, portanto, agora, podemos adicionar também é válido para essa ação

134
00:11:16,520 --> 00:11:17,060
despachada.