Share
Ben je klaar om je kennis van React te testen? In deze video van mijn cursus over moderne webapps met React en Redux wordt u uitgedaagd om een basis-takenlijstapp in React te bouwen. In het bijzonder moet u gegevens doorgeven aan een onderliggende component, waar deze wordt bijgewerkt en naar de bovenliggende component wordt teruggestuurd.
Als u niet zeker weet hoe u dat moet doen, hoeft u zich geen zorgen te maken. U kunt doorgaan met de oplossing. Ik zal je in detail het hele proces doornemen om je te laten zien hoe het is gedaan!
In deze uitdaging ga je een eenvoudige takenlijst-app maken in React.
We hebben twee componenten al gebouwd: a Te doen lijst component en een TodoItem bestanddeel.
De Te doen lijst component heeft gewoon een lijst met to-dos in zijn staat, en elke heeft een tekst eigendom en een gedaan eigendom. Vervolgens kunnen we onze lijst met taken weergeven in de TodoItem bestanddeel.
Dan in de TodoItem component, geven we alleen een lijstitem weer met een invoervak dat de waarde heeft. Als dit taakitem is voltooid, kan de waarde niet worden bewerkt. Het is alleen-lezen. Dan hebben we een knop waarmee we een taak kunnen "voltooien" of "voltooien".
Op dit moment wordt het prima weergegeven aan de rechterkant, maar we kunnen deze dingen niet echt in de staat van onze veranderen Te doen lijst component. Dus als ik probeer om wijzigingen aan te brengen in deze invoerelementen, gebeurt er niets. Als ik klik Af hebben, de tekst op de knop verandert niet zoals het hoort. En ik kan nog steeds tekst in de invoervelden selecteren en, als ik daadwerkelijk wijzigingen kon aanbrengen, zou het bewerkbaar zijn
Dat alles moet correct worden aangesloten. En dat is jouw uitdaging! Hier is de CodePen met alle broncode waarmee u kunt werken.
Vork de pen en probeer je eigen oplossing te vinden! Of lees verder en ik zal je hieronder doorlezen.
Begin met het formuleren van de originele CodePen en geef deze een andere naam, bijv. door "MIJN OPLOSSING" toe te voegen.
We hebben een aantal verschillende dingen die we hier moeten doen. Ten eerste, binnen onze TodoItem component, moeten we wijzigingen in deze gegevens kunnen aanbrengen. Dat betekent dat we een moeten hebben bij klikken handler voor de knop en een onChange handler voor het invoerelement.
Maar dan hebben we een manier nodig om die veranderingen door te geven aan de ouder Te doen lijst component. Dus dat betekent dat Te doen lijst moet een functie doorgeven aan TodoItem, zodat het die functie kan noemen.
Dus we beginnen met het toevoegen van een updateTodo functie in Te doen lijst met wat dummy-tekst voor nu, die we later zullen bijwerken. En nu dat we hebben gemaakt updateTodo, we kunnen het binnen gebruiken TodoItem.
Dus hoe kan dit werken? Laten we beginnen met de knop. We voegen een toe bij klikken handler, en we zullen toevoegen this.handleClick.
Dus nu moeten we onze schrijven handleClick functie. De handleClick functie gaat een wijziging aanbrengen in de Te doen eigendom dat is doorgegeven aan TodoItem.
Wanneer hierop wordt geklikt, willen we de waarde van gedaan is. Dus als het niet waar is, zet het dan op 'waar' en als het waar is, zet het dan op 'onwaar'. En dan willen we natuurlijk die nieuw bijgewerkte versie doorgeven Te doen object back-up door de updateTodo functie.
We kunnen onze krijgen newTodo door te doen Object.assign, zodat we de gegevens niet muteren. En we zullen alle eigenschappen kopiëren in onze bestaande taak, die eigenlijk is this.props.todo.
Maar dan willen we ervoor zorgen dat we het overschrijven gedaan eigendom, wat het omgekeerde of het negatieve van zou moeten zijn this.props.todo.done.
Dat is onze newTodo. En dan kunnen we doen this.props.updateTodo, en we zullen het onze doorgeven newTodo.
OK, dus dat is de klik verwerken. Laten we nu naar beneden gaan en onze schrijven updateTodo nu, zodat we dit echt in actie kunnen zien. Op dit moment, als ik klik Af hebben, je kunt zien dat ons nieuwe actiepunt wordt afgedrukt waar Klaar is ingesteld op Waar, maar dat zien we nu nog niet in de gebruikersinterface. Dat komt omdat we dit nu meteen moeten opslaan Te doen terug in onze todos staat.
Dus laten we doorgaan en een schrijven updateTodo functie, en het gaat dat nemen newTodo als zijn parameter. En daarbinnen gaan we doen this.setState.
Nu ga ik de staat instellen op een manier die u misschien nog nooit eerder hebt gezien. We gaan een functie doorgeven om de status in te stellen in plaats van een object door te geven. Dit wordt in feite beschouwd als een goede gewoonte in React en kan mogelijk de enige manier zijn om de staat in de toekomst te bepalen. De functie waarnaar u overgaat setstate ontvangt de huidige status als een parameter. Dus we kunnen die status als een parameter voor deze functie ontvangen en dan retourneren we onze nieuwe status van deze functie.
Dit is eigenlijk een betrouwbaardere manier om een nieuwe staat te creëren die is gebaseerd op de oude staat. Je kunt het bijna zien als een soort reductiefunctie, binnen onze setstate telefoontje.
Dus we gaan door en geven hier een nieuw object terug. En aangezien dat alles is wat we van deze functie gaan doen, kunnen we eigenlijk de accolades tussen haakjes plaatsen, zodat deze weet dat dit een object is en niet het functieblok.
Laten we ons bestaande krijgen state.todos, en we zullen eroverheen mappen Te doen daar, en als het todo.id is gelijk aan de newTodo.id, dan weten we dat dit het is Te doen object dat we moeten vervangen. Dus we kunnen het vervangen door de newTodo, en anders kunnen we gewoon het oude teruggeven Te doen, omdat het niet degene is die we willen vervangen.
En dan moeten we alleen onze veranderen updateTodo functie om naar te verwijzen this.updateTodo.
Nu, als u klikt Af hebben, je zult zien dat de knop verandert in Unfinish, en dat is omdat todo.done is nu waar in plaats van vals. Ook is de tekst "wasvloer" nu een beetje grijs en is deze niet langer bewerkbaar. Als ik klik Unfinish, het schakelt terug naar Finish en het tekstvak is opnieuw bewerkbaar.
Onze volgende stap is om de tekst bewerkbaar te maken door een onChange handler.
Op de invoer regel, we zullen toevoegen onChange = this.handleChange. En dan moeten we schrijven handleChange.
We beginnen met het maken van een newTodo en kopiëren van alle eigenschappen van this.props.todo, en dan handleChange zal ons evenementobject passeren. We gaan de tekst zijn e.target.value. En dan daaronder zullen we doen this.props.updateTodo, en we zullen het doorgeven newTodo.
Dus nu, als we de tekst wijzigen, werkt het prima. We kunnen nu zeggen eieren kopen in plaats van melk, en we kunnen zeggen dat we de auto moeten wassen in plaats van de vloer. We hebben nu dus met succes wijzigingen aangebracht in een object in een onderliggende component en die wijzigingen doorgegeven aan de bovenliggende component, waar ze kunnen worden opgeslagen.
Dus het werkt nu zoals we het wilden, maar er is nog een ding dat ik wil doen. Je zult merken dat het handleChange functie en de handleClick functie heeft veel vergelijkbare code. Ik heb vaak kindcomponenten als deze gehad, waar we een object op de een of andere manier willen bijwerken en het dan doorgeven aan een ouder, en je zult zien dat een gebruikelijk patroon om dat te doen, gebruik maakt van Object.assign op deze manier.
Dus wat we gaan doen om dingen op te ruimen is om een nieuwe functie te creëren sendDelta. In dit geval is delta slechts de term voor wat er moet veranderen tussen deze taak en de nieuwe taak die we nodig hebben. Dus wat we hier kunnen doen, is onze delta, of ons object voor alleen de eigenschappen die moeten veranderen, naar sendDelta.
Dan kopiëren we de code gewoon van handleClick en plak het in sendDelta. De delta is in feite het laatste argument waaraan we zijn overgegaan Object.assign, dus we kunnen doorgaan en de onderstaande code vervangen door delta, en stuur dat dan gewoon.
Dus nu binnen handleClick en handleChange, we kunnen gewoon het grootste deel van de code vervangen door this.sendDelta, zoals hieronder getoond. Zoals je kunt zien, is het veel beknopter.
Dus dat is de oplossing! Voor de volledige broncode kunt u verwijzen naar de onderstaande CodePen-oplossing:
Natuurlijk heb je misschien een andere oplossing bedacht. Als dat zo is, is dat geweldig. In ieder geval hebben we nu met succes een onderliggende component gemaakt die de gegevens kan wijzigen en vervolgens die wijzigingen kan doorsturen om deze op te slaan naar de bovenliggende component.
In de volledige cursus, Modern Web Apps With React en Redux, leert u hoe u React en Redux kunt gebruiken om een complete webtoepassing te bouwen. U begint met de eenvoudigst mogelijke architectuur en bouwt langzaam de app op, functie voor functie. Tegen het einde heb je een complete flashcards-app gemaakt om te leren door gespreide herhalingen, en je hebt ook veel geleerd over React en Redux, en je ES6-vaardigheden (ECMAScript 2015) verscherpt..
Je kunt deze cursus meteen volgen met een abonnement op Envato Elements. Voor een enkel laag maandelijks bedrag krijg je niet alleen toegang tot deze cursus, maar ook tot onze groeiende bibliotheek met meer dan 1000 videocursussen en toonaangevende e-boeken over Envato Tuts+.
Bovendien krijgt u nu onbeperkte downloads van de enorme Envato Elements-bibliotheek met meer dan 460.000 creatieve items. Creëer met unieke lettertypen, foto's, afbeeldingen en sjablonen en lever sneller betere projecten.
Accentsconagua