Para produzir nossos próprios objetivos.
Vou adicionar um novo componente na pasta de componentes e mantê-lo gerenciável.
Na verdade, vou criar uma nova subpasta para cada componente.
Isso não é obrigatório, mas eu pessoalmente gosto de fazer isso, porque então posso encontrar rapidamente todos os meus componentes.
Obviamente, agora você precisa ajustar sua importação aqui em excesso.
Minha ideia foi feita automaticamente, caso isso não acontecesse.
Certifique-se de ajustar a importação da sua lista de objetivos para refletir isso em U.
Pasta.
Eu adicionei.
E, em seguida, ele adicionará um novo componente de objetivo aqui na pasta de componentes também.
Adicione um novo arquivo jazz de objetivo e um novo objetivo.
Veja-nos como queda.
Se você deseja aplicar algum estilo agora em um novo arquivo gold jazz, primeiro precisamos importar o reagir
do reagir.
Você sempre precisa fazer isso.
Caso contrário, você não poderá usar J como X nesse arquivo porque lembre-se de que J como exis é traduzido para reagir ao elemento de
criação.
E então aqui eu tenho meu novo componente de objetivo aqui.
Nós poderíamos aceitar Propp spot desde que não precisássemos deles.
Nós não precisamos.
E depois exporto novo objetivo.
Agora, no Abcess, quero renderizar uma nova meta, portanto importaremos novo ouro.
Novamente, o nome aqui é com você, mas deve começar com um caractere inicial maiúsculo.
E eu importo isso dos componentes.
Novo objetivo.
E então aqui podemos renderizar como acima da nossa lista de objetivos, digamos assim.
Não, isso não funcionaria porque o novo objetivo ainda não é um componente de reação válido porque é uma função no momento, mas não
é uma função que funciona como um componente de reação porque não está fazendo uma coisa crucial.
Não está voltando ao seu X.
Então, vamos voltar.
Eu sou X aqui e ali para manter as coisas simples, tudo em um fórum.
E nesse fórum, adicionarei um campo de entrada.
Digite o elemento de fechamento automático do texto em HGL regular.
Isso não precisa ser fechado automaticamente em J é X.
Tem que ser fechado automaticamente.
E então um botão do tipo enviar.
Onde eu digo em Gohl, uma forma muito simples, e se agora a protegemos, você deve vê-la aqui.
Agora, vamos adicionar um pouco de estilo para deixar isso mais bonito para o pai e uma classe para formar um novo traço
dourado.
E importarei o novo ouro como arquivo para o novo arquivo JavaScript dourado.
E então aqui na nova classe gold, que é adicionada no formulário all at.
Uma margem de dois REM em todas as direções e linhas de texto.
Para que isso pareça um pouco melhor.
E agora também podemos estilizar a entrada do botão.
Mas não quero gastar muito tempo nisso.
Portanto, vamos deixar como está agora.
Quando você clica no botão, a propósito, esta página é recarregada porque agora a funcionalidade padrão
do navegador é ativada.
Ou seja, quando um botão do tipo enviar é clicado em um fórum, uma solicitação é enviada ao servidor
que é veiculado nesta página.
Não é esse o comportamento que queremos aqui, porque aqui não quero enviar uma solicitação a nenhum servidor,
porque não estamos fazendo nada no lado do servidor.
Em vez disso, quero lidar com esse clique com JavaScript e essa é a primeira coisa que farei aqui.
Vamos ver como podemos lidar com eventos, porque até agora não fizemos isso.
Quero lidar com o evento de envio deste fórum aqui e reagir torna isso simples.
Podemos adicionar ouvintes de eventos a qualquer elemento, não apenas ao fórum, mas a qualquer elemento adicionando
minúsculas em.
E então o nome do evento.
Não, nem todos os eventos são suportados em todos os elementos.
Mas aqui você tem o HD padrão dele, todos os elementos disponíveis.
Por exemplo, em um elemento do fórum no qual você deve enviar um evento, envie um botão.
Você também tem um clique.
Mas como é um botão em um fórum, é melhor lidar com isso no próprio fórum.
Agora, o que você passa como valor para o Mido como valor?
Você precisa passar uma função que deve ser acionada quando esse evento acontecer.
Então, um ponteiro para uma função.
Você poderia fazer este ano com chaves e depois com uma função anônima na linha.
Mas eu não gosto muito disso.
Em vez disso, vou criar uma nova função aqui.
E em JavaScript, você pode criar funções e funções.
Então, em vez da nova função de objetivo, que ainda é, no final, posso criar uma nova função.
Eu vou criar o meu.
No manipulador de metas, a atribuição de nomes depende de você.
Mas gostei do nome de Handler no final do meu nome de funk.
Se é uma função que é acionada em algum evento.
Portanto, neste caso, é uma função, usarei novamente uma função de seta, o que não é
obrigatório, mas usarei apenas funções de seta aqui e o Enns up Mitt agora pode apontar para o AD Gohl Handler.
Não execute aqui, então não adicione parênteses.
Em vez disso, você apenas deseja apontar para a função para que o navegador e reagir em um esforço comum
possam executar disfunção para você.
Quando ocorre o evento de envio?
Agora, essa função obterá um objeto de evento, um parâmetro de evento transmitido automaticamente ao reagir e, por exemplo, podemos chamar
prevenir padrão, o que evita que o navegador envie uma solicitação para algum back-end, o que não deve ser feito
aqui porque não está lidando com isso no lado do servidor aqui.
Nosso servidor serve apenas esse arquivo HMO de índice único.
Não possui lógica para lidar com envios.
Em vez disso, quero lidar com isso aqui em JavaScript no front-end.
No meu aplicativo REACT, por enquanto, ignorarei o que o usuário inseriu aqui e, em vez disso,
simplesmente criarei um objetivo falso.
E quero passar esse objetivo fictício para o aplicativo G. S. e adicione-o aos meus Scholes principais aqui para que seja
renderizado aqui.
Agora, passo a passo.
Podemos criar um novo objetivo dharmico, é claro.
Nesse artigo, Hanover.
Ao adicionar uma nova constante de meta aqui, que é um objeto JavaScript, a idéia aqui pode ser um número
aleatório.
Com mothe aleatório.
Claro que isso não é realmente um eu único. D. , mas é bom o suficiente e vou convertê-lo em uma string.
É bom o suficiente para a nossa aplicação de demonstração aqui.
Quero dizer.
E o texto aqui mais tarde será o usuário digitado aqui.
Por enquanto, apenas alguns textos fictícios.
Meu novo objetivo.
Então agora temos o novo objetivo aqui.
E, é claro, podemos usar o console bloqueado para ver se tudo funciona até esse ponto.
Então, se salvarmos isso.
Vemos nosso formulário aqui.
E se você clicar em adicionar meta, a página não será recarregada.
Mas, em vez disso, vemos o objetivo do carimbo aqui.
Poderia criar, é claro, vários objetivos.
Mas, no momento, eles não são adicionados a esta lista.
Para adicionar à lista, agora precisamos extrair essa meta do novo componente da meta para o componente do aplicativo.
Agora, antes de aprendermos, podemos passar a nossa rodada de adereços.
Mas isso foi do aplicativo para a lista de objetivos.
Então, para um componente de nível inferior, um componente que está incluído em um aplicativo.
Agora é a outra direção.
Queremos passar dados do novo objetivo para o componente pai.
Portanto, o componente que inclui o novo componente do objetivo.
Como é que isso funciona?