Share
Sei pronto a mettere alla prova la tua conoscenza di React? In questo video tratto dal mio corso su App Web moderne con React e Redux, ti verrà chiesto di creare una semplice app per la lista di cose da fare in React. In particolare, dovrai trasferire i dati a un componente figlio in cui verrà aggiornato e rinviato al componente principale.
Se non sei sicuro di come farlo, non preoccuparti, puoi saltare alla soluzione. Ti illustrerò dettagliatamente l'intero processo per mostrarti come è stato fatto!
In questa sfida, creerai una semplice app lista di cose da fare in React.
Abbiamo due componenti già costruiti: a Lista di cose da fare componente e a TodoItem componente.
Il Lista di cose da fare il componente ha solo una lista di cose da fare nel suo stato, e ognuno ha a testo proprietà e a fatto proprietà. Quindi possiamo rendere la nostra lista di cose da fare in TodoItem componente.
Quindi nel TodoItem componente, viene semplicemente visualizzato un elemento di elenco con una casella di input che ha il valore. Se questo elemento delle attività è fatto, il valore non è modificabile, è di sola lettura. Quindi abbiamo un pulsante che possiamo usare per "Finire" o "Unfinisci" un compito.
In questo momento, sta funzionando bene sul lato destro, ma non possiamo effettivamente cambiare queste cose nello stato del nostro Lista di cose da fare componente. Quindi se provo a fare cambiamenti in questi elementi di input, non succede nulla. Se clicco finire, il testo sul pulsante non cambia come dovrebbe. E posso ancora selezionare il testo nei campi di input e, se potessi effettivamente apportare modifiche, sarebbe modificabile
Tutto ciò deve essere cablato correttamente. E questa è la tua sfida! Ecco il CodePen con tutto il codice sorgente con cui lavorare.
Forcella la penna e prova a capire la tua soluzione! Oppure continua a leggere e ti guiderò attraverso di esso.
Iniziare biforcando il CodePen originale e assegnandogli un nome diverso, ad es. aggiungendo "LA MIA SOLUZIONE".
Abbiamo un paio di cose diverse che dobbiamo fare qui. Primo, dentro il nostro TodoItem componente, dobbiamo essere in grado di apportare modifiche a questi dati. Ciò significa che dobbiamo avere un al clic gestore per il pulsante e un onChange gestore per l'elemento di input.
Ma poi abbiamo bisogno di un modo per trasferire tali modifiche al genitore Lista di cose da fare componente. Quindi questo significa Lista di cose da fare ha bisogno di passare una funzione fino a TodoItem, in modo che possa chiamare quella funzione.
Quindi inizieremo aggiungendo un updateTodo funzione in Lista di cose da fare con qualche testo fittizio per ora, che aggiorneremo in seguito. E ora che abbiamo creato updateTodo, possiamo usarlo dentro TodoItem.
Quindi, come potrebbe funzionare? Bene, iniziamo con il pulsante. Aggiungeremo un al clic gestore, e aggiungeremo this.handleClick.
Quindi ora dobbiamo scrivere il nostro handleClick funzione. Il handleClick la funzione sta per apportare una modifica al fare proprietà che è stata tramandata a TodoItem.
Quando si fa clic su questo, vogliamo invertire qualsiasi valore fatto è. Quindi se è falso, passa a true, e se è vero, passa a false. E poi, ovviamente, vogliamo passare a quelli appena aggiornati fare oggetto di backup attraverso il updateTodo funzione.
Possiamo ottenere il nostro newTodo facendo Object.assign, in modo tale da non mutare i dati. E coperemo tutte le proprietà nella nostra attività, che è in realtà this.props.todo.
Ma poi vogliamo essere sicuri di sovrascrivere il fatto proprietà, che dovrebbe essere il contrario o il negativo di this.props.todo.done.
Quindi questo è il nostro newTodo. E poi possiamo fare this.props.updateTodo, e lo passeremo nostro newTodo.
OK, quindi questo è gestire il clic. Ora andiamo giù e scriviamo il nostro updateTodo ora, in modo che possiamo effettivamente vedere questo in azione. In questo momento, se clicco finire, puoi vedere che il nostro nuovo oggetto to-do è stato stampato dove done è impostato su true, ma non lo vediamo ancora nell'interfaccia utente. Questo perché, ora, abbiamo bisogno di salvare questo nuovo fare di nuovo nel nostro Todos stato.
Quindi andiamo avanti e scriviamo un updateTodo funzione, e ci vorrà newTodo come il suo parametro. E dentro, lo faremo this.setState.
Ora, imposterò lo stato in un modo che potresti non aver visto prima. Stiamo per passare una funzione per impostare lo stato anziché passare un oggetto. Questo è effettivamente considerato una buona pratica in React e potrebbe essere l'unico modo per impostare lo stato in futuro. La funzione che passi setState riceverà lo stato corrente come parametro. Quindi possiamo ricevere quello stato come parametro per questa funzione, e quindi restituiamo il nostro nuovo stato da questa funzione.
Questo è in realtà un modo più affidabile per creare un nuovo stato basato sul vecchio stato. Si può quasi pensare a una sorta di funzione di riduzione, all'interno della nostra setState chiamata.
Quindi andremo avanti e restituiremo un nuovo oggetto qui. E poiché questo è tutto ciò che faremo da questa funzione, possiamo in realtà racchiudere tra parentesi le parentesi graffe in modo che sappia che questo è un oggetto e non il blocco funzione.
Prendiamo la nostra esistente state.todos, e mapperemo su ciascuno di essi fare lì, e se il todo.id è uguale al newTodo.id, allora sappiamo che questo è il fare oggetto che dobbiamo sostituire. Quindi possiamo sostituirlo con il newTodo, e altrimenti possiamo solo restituire il vecchio fare, perché non è quello che stiamo cercando di sostituire.
E poi abbiamo solo bisogno di cambiare la nostra updateTodo funzione a cui fare riferimento this.updateTodo.
Ora, se clicchi finire, vedrai che il pulsante diventa Unfinish, e questo perché todo.done è ora vero invece di falso. Inoltre, il testo "wash floor" è ora un po 'oscurato e non è più modificabile. Se clicco Unfinish, torna a Fine e la casella di testo è nuovamente modificabile.
Il nostro prossimo passo è rendere il testo modificabile aggiungendo un onChange gestore.
Sul ingresso linea, aggiungeremo onChange = this.handleChange. E poi abbiamo bisogno di scrivere handleChange.
Inizieremo creando un newTodo e copiare tutte le proprietà da this.props.todo, e poi handleChange passerà il nostro oggetto evento. Stiamo andando a impostare il testo essere e.target.value. E poi sotto quello che faremo this.props.updateTodo, e lo passeremo il newTodo.
Quindi, se cambiamo il testo, funziona perfettamente. Ora possiamo dire di comprare uova al posto del latte e possiamo dire di lavare l'auto al posto del pavimento. Quindi, ora stiamo apportando modifiche a un oggetto in un componente figlio e passando di nuovo tali modifiche al componente principale, dove possono essere memorizzate.
Quindi ora funziona come volevamo, ma c'è ancora un'altra cosa che voglio fare. Noterai che il handleChange funzione e il handleClick la funzione ha un sacco di codice simile. Ho spesso avuto componenti figlio come questo in cui vogliamo aggiornare un oggetto in qualche modo e poi passarlo a un genitore, e scoprirai che un modello comune per farlo sta usando Object.assign in questo modo.
Quindi quello che faremo per mettere ordine in ordine è creare una nuova funzione chiamata sendDelta. In questo caso, delta è solo il termine per qualsiasi cosa debba cambiare tra questa cosa da fare e la nuova cosa da fare di cui abbiamo bisogno. Quindi quello che possiamo fare qui è passare il nostro delta, o il nostro oggetto solo per le proprietà che devono cambiare, a sendDelta.
Quindi basta copiare il codice da handleClick e incollarlo sendDelta. Il delta è fondamentalmente l'ultimo argomento a cui siamo passati Object.assign, quindi possiamo andare avanti e sostituire il codice evidenziato sotto con delta, e poi manda quello.
Quindi ora dentro handleClick e handleChange, possiamo semplicemente sostituire la maggior parte del codice con this.sendDelta, come mostrato di seguito. Come puoi vedere, è molto più conciso.
Quindi questa è la soluzione! Per il codice sorgente completo, è possibile fare riferimento alla soluzione CodePen mostrata di seguito:
Certo, potresti aver trovato una soluzione diversa. Se è così, è grandioso. In ogni caso, ora abbiamo creato con successo un componente figlio che può modificare i suoi dati e quindi inviare tali modifiche di backup per l'archiviazione sul componente principale.
Nel corso completo, Applicazioni Web moderne con React e Redux, imparerai come utilizzare React e Redux per creare un'applicazione web completa. Inizierai con l'architettura più semplice possibile e creerai lentamente l'app, funzione per caratteristica. Alla fine, avrai creato un'app flashcard completa per l'apprendimento tramite ripetizione spaziale, e avrai anche imparato molto su React e Redux, oltre ad affinare le tue abilità ES6 (ECMAScript 2015).
Puoi seguire questo corso subito con un abbonamento a Envato Elements. Con una sola tariffa mensile bassa, puoi accedere non solo a questo corso, ma anche alla nostra libreria in crescita di oltre 1.000 corsi video e eBook leader del settore su Envato Tuts+.
Inoltre ora ottieni download illimitati dall'enorme libreria Envato Elements di oltre 460.000 risorse creative. Crea con caratteri, foto, grafica e modelli univoci e realizza progetti migliori più velocemente.
Accentsconagua