Per realizzare i nostri obiettivi.
Aggiungerò un nuovo componente nella cartella dei componenti e lo manterremo gestibile.
In realtà creerò una nuova sottocartella per ogni componente.
Questo non è un must, ma personalmente mi piace farlo perché posso trovare rapidamente tutti i miei componenti.
Ovviamente, ora è necessario regolare l'importazione qui in ascesso.
La mia idea lo ha fatto automaticamente nel caso in cui non fosse successo.
Assicurati di regolare l'importazione dell'elenco obiettivi in modo che rifletta in U.
Cartella.
Ho aggiunto.
E poi aggiungerà un nuovo componente obiettivo qui nella cartella componenti e anche lì.
Aggiungi un nuovo file jazz obiettivo e un nuovo obiettivo.
Vedici come autunno.
Se vuoi applicare un po 'di styling ora in un nuovo file gold jazz, dobbiamo prima di tutto importare reazioni
da reazioni.
Devi sempre farlo.
Altrimenti non puoi usare J come X in quel file perché tieni presente J come exis tradotto per reagire a create
element.
E poi qui ho il mio nuovo componente obiettivo qui.
Potremmo accettare Propp spot fintanto che non ne avremo bisogno.
Non dobbiamo.
E poi esporto un nuovo obiettivo.
Ora, in Abcess, voglio raggiungere un nuovo obiettivo, quindi importeremo nuovo oro.
Ancora una volta, il nome qui dipende da te, ma dovrebbe iniziare con un carattere iniziale maiuscolo.
E lo importa dai componenti.
Nuovo obiettivo
E quindi qui possiamo renderizzare come sopra la nostra lista di obiettivi, diciamo così.
No, questo non funzionerebbe perché il nuovo obiettivo non è ancora un componente di reazione valido perché è una funzione in questo momento, ma
non è una funzione che funziona come componente di reazione perché non sta facendo una cosa cruciale.
Non sta tornando alla sua X.
Quindi torniamo.
Sono J is X qua e là per mantenere le cose semplici, tutto in un forum.
E in quel forum aggiungerò un campo di input.
Digita il testo con elemento a chiusura automatica in HGL normale.
Non è necessario chiudersi automaticamente in J is X.
Deve essere autochiudente.
E poi un pulsante che è di tipo submit.
Dove dico a Gohl, un modulo molto semplice, e se ora lo mettiamo al sicuro, dovresti vederlo qui.
Ora aggiungiamo un po 'di stile per rendere questo aspetto un po' più bello per papà e una classe per formare un nuovo trattino
d'oro.
E importerò il nuovo gold come file nel nuovo file JavaScript gold.
E poi qui sulla nuova classe d'oro, che viene aggiunta nel modulo tutto a.
Un margine di due REM in tutte le direzioni e riga di testo.
In modo che questo appaia un po 'più bello.
E ora potremmo anche modellare l'input del pulsante.
Ma non voglio spendere troppo tempo su questo.
Quindi lo lasceremo com'è, però, proprio ora.
Quando fai clic sul pulsante, a proposito, questa pagina verrà ricaricata perché in questo momento verrà avviata
la funzionalità predefinita del browser.
Ciò significa che quando si fa clic su un tipo di pulsante di invio in un forum, viene inviata una richiesta al server
che viene pubblicato in questa pagina.
Non è il comportamento che vogliamo qui, però, perché qui non voglio inviare una richiesta a nessun
server perché non stiamo facendo nulla sul lato server.
Invece, voglio gestire quel clic con JavaScript e questa è la prima cosa che farò qui.
Vediamo come possiamo gestire gli eventi, perché finora non l'abbiamo fatto.
Voglio gestire l'evento di presentazione di questo forum qui e reagire lo rende semplice.
Possiamo aggiungere listener di eventi a qualsiasi elemento, non solo al forum, ma a qualsiasi elemento aggiungendo
in minuscolo.
E poi il nome dell'evento.
No, non tutti gli eventi sono supportati su ogni elemento.
Ma qui hai l'HD predefinito, tutti gli elementi disponibili.
Ad esempio, in un elemento del forum in cui devi inviare l'evento, invia su un pulsante.
Hai anche un clic.
Ma poiché è un pulsante in un forum, è meglio gestirlo sul forum stesso.
Ora, cosa passi come valore a Enns up Mido come valore?
Devi passare una funzione che dovrebbe essere attivata quando si verifica questo evento.
Quindi un puntatore a una funzione.
Potresti farlo quest'anno con parentesi graffe e poi una funzione in linea anonima.
Ma non mi piace troppo.
Invece, creerò una nuova funzione qui.
E in JavaScript puoi creare funzioni e funzioni.
Quindi, invece della nuova funzione obiettivo, che è ancora, alla fine posso creare una nuova funzione.
Creerò il mio.
A nome del gestore del goal la nomina dipende da te.
Ma mi piaceva il suo nome di avere Handler alla fine del mio nome funk.
Se è una funzione che viene attivata su qualche evento.
Quindi questa è una funzione in questo caso, userò di nuovo una funzione freccia, che non
è un must, ma userò solo le funzioni freccia qui e Enns up Mitt ora può puntare su AD Gohl Handler.
Non eseguirlo qui, quindi non aggiungere parentesi.
Invece, vuoi solo puntare sulla funzione in modo che il browser e reagire in uno sforzo comune possano
eseguire disfunzioni per te.
Quando si verifica l'evento di invio?
Ora questa funzione otterrà un oggetto evento, un parametro evento passato automaticamente da reazioni e quindi, ad esempio, possiamo chiamare
prevent default, il che impedisce al browser predefinito di inviare una richiesta a qualche back-end, cosa che non dovrebbe
fare qui perché noi non lo gestiamo sul lato server qui.
Il nostro server serve solo quel singolo file HMO indice.
Non ha alcuna logica per gestire alcun invio.
Invece, voglio gestirlo qui in JavaScript sul front-end.
Nella mia applicazione REACT e per il momento ignorerò ciò che l'utente ha inserito qui e
creerò semplicemente un obiettivo fittizio.
E voglio passare quell'obiettivo fittizio all'app G. S. e aggiungilo al mio core Scholes qui in modo che venga
visualizzato qui.
Ora, passo dopo passo.
Naturalmente possiamo creare un nuovo obiettivo Dharmic.
In quell'articolo, Hannover.
Aggiungendo qui una nuova costante obiettivo, che è un oggetto JavaScript, l'idea qui potrebbe essere un numero casuale.
Con il casuale.
Questo, ovviamente, non è davvero un I. unico. D. , ma è abbastanza buono e lo convertirò in una stringa.
È abbastanza buono per la nostra applicazione demo qui.
Intendo.
E poi il testo qui in seguito sarà l'utente di testo inserito qui.
Per ora, solo un po 'di testo fittizio.
Il mio nuovo obiettivo
Quindi ora abbiamo il nuovo obiettivo qui.
E, naturalmente, possiamo console bloccati per vedere che tutto fino a questo punto funziona.
Quindi se lo salviamo.
Vediamo il nostro modulo qui.
E se fai clic su Aggiungi obiettivo, la pagina non verrà ricaricata.
Ma invece vediamo qui l'obiettivo del francobollo.
Potrebbe creare, ovviamente, più obiettivi.
Ma al momento, non sono stati aggiunti a questo elenco.
Per aggiungerlo all'elenco, ora è necessario estrarre tale obiettivo dal nuovo componente obiettivo al componente app.
Ora, prima di imparare, possiamo passare il nostro giro di oggetti di scena.
Ma era dall'app all'elenco degli obiettivi.
Quindi a un componente di livello inferiore, un componente che include un'app.
Ora è l'altra direzione.
Vogliamo passare i dati dal nuovo obiettivo al componente principale.
Quindi il componente che include il nuovo componente obiettivo.
Come funziona?