Rakendusesiseste teadete näitamine Reaali veebirakenduse Material-UI abil

Kujutise allikas

Mõnes olukorras peab teie veebirakendus näitama informatiivset sõnumit, mis annab kasutajatele teada, kas sündmus õnnestus või mitte. Näiteks teade „Edu” pärast seda, kui kasutaja klõpsab nuppu ja on mõne toimingu edukalt lõpetanud.

Selles õpetuses näitan teile, kuidas luua lihtsat komponenti rakendusesisesteks teadeteks rakenduste React ja Material-UI abil. Me nimetame seda teataja komponendiks.

Siin on selle õpetuse peamised jaotised:

  • Alustamine
  • Teataja komponent
  • Impordi teataja komponent registrilehele
  • Testimine

Kui leiate, et see artikkel on kasulik, võiksite meie Githubi repot tähistada ja vaadata meie raamatut, kus käsitleme seda ja paljusid teisi teemasid üksikasjalikult.

Alustamine

Selle õpetuse jaoks olen loonud teile lihtsa veebirakenduse. Kasutame koodi, mis asub meie ehitajaraamatu repoteekide kaustas Tutorials / 4-start.

Kui teil pole aega rakendust lokaalselt käivitada, siis panin selle näidisrakenduse siia.

Rakenduse kohalik käitamine:

  • Kloonige ehitajaraamatu repoteek teie kohalikule masinale järgmiselt:
git kloon git@github.com: ehitajaraamat / ehitajaraamat.git
  • Kõigi kaustas 4 käivitatavate kaustade installimiseks käivitage lõng või npm install.
  • Rakenduse käivitamiseks jookse lõnga.

Lehe register

Minge oma brauseris aadressile http: // localhost: 3000. See on meie register, millel on / marsruut. Next.js pakub automaatset marsruutimist kausta / pages asuvatele lehtedele. Iga lehefaili nimest saab selle lehe marsruut.

Meie registerleht on lihtne lehekomponent, mis loob vormi, sisendi ja nupu (rohkem selgitusi allpool).

Siin on meie registerlehe kood aadressil pages / index.js:

Mõned märkused:

  • Oleksime võinud selle lehe määratleda kodakondsuseta funktsionaalse komponendina, kuna sellel pole olekut, olelustsüklit ega viiteid (loe lähemalt kodakondsuseta funktsionaalsete komponentide kasutamise kohta võrreldes React ES6 klassidega). Näete seda Eslinti hoiatust: Komponent tuleks kirjutada puhta funktsioonina. Lõplikul indeksilehel, millest selles õpetuses kirjutame, on siiski viide. Seetõttu kirjutasime selle esialgse registrilehe ES6 klassi lapsena laiendeid kasutades.
  • Lehe elemendi kohandamiseks importisime pea saidilt Next.js. sisse lisasime lehe ja <meta> kirjelduse otsimootorite robotite poolt korralikuks indekseerimiseks (sobib hästi SEO jaoks). Teksti <title> sees kuvatakse teie brauseri vahekaardil:</li></ul><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558895034.png" /><ul><li>Kasutasime Material-UI tekstivälja ja nupu komponente, mis renderdatakse vastavalt HTML-i elementideks <sisend> ja <nupp>.</li><li>Mässisime oma lehe sisse kõrgema järjekorranumbriga komponendiga. Meie rakendus kasutab Next.js ja withLayout tagab, et serveripoolne renderdamine toimib materjal-UI jaoks meie rakenduses React-Next. withLayout lisab ka meie päise komponendi (asub komponentides / Header.js) igale lehele, mille rakendusega Layout mähitakse. Serveripoolne renderdamine pole Material-UI ega React jaoks vajalik, kuid see on Next.js peamine funktsioon. Arutasime teises õpetamises serveri ja kliendi poolt pakutavat renderdamist rakenduses React.</li></ul><p>Oleme lõpetanud oma esialgse registrilehe kirjeldamise. Arutleme nüüd komponendi Teavitaja üle, mille hiljem impordime lehele Indeks, et näidata meie veebirakenduse kasutajatele infosõnumeid.</p><h3>Teataja komponent</h3><p>Alustuseks määratleme komponendi Teavitaja. Me määratleme teataja kodakondsuseta funktsiooni asemel kui React.komponendi, sest teatajal on olek, üks olelustsükli meetod ja paar sündmuste käsitlemise funktsiooni.</p><p>Oma teabesõnumite jaoks kasutame Material-UI suupisteriba. Vaadake suupisteriba kasutamise näiteid ametlikul Material-UI saidil.</p><p>Siin on meie teavitaja komponendi kõrgetasemeline ülevaade:</p><p>Looge 4-starti kaustas / komponendid fail Notifier.js. Lisage sellele failile ülaltoodud kõrgetasemeline kontuur. Allpool asendame nummerdatud kommentaarid koodiga.</p><p>1. Kasutame oma teataja oleku jaoks Material-UI suupisteriba avatud ja sõnumi rekvisiite. Kontrollige suupisteriba täielikku rekvisiitide loetelu.</p><p>Algselt peaks meie teataja olema suletud olekus, kui sõnumiks on tühi string. Määratleme teataja algse oleku järgmiselt:</p><p>2. Kirjutagem nüüd funktsiooni, mis värskendab komponendi Notifier olekut. Funktsioon muudab avatud tugiteenuse väärtuse tõeseks ja seab sõnumipositsiooni väärtuseks mittetühja stringi. Kutsutakse seda funktsiooni openSnackbar ().</p><p>Enne OpenSnackbar () käivitamist tuleb meie komponent Notifier paigaldada DOM-i. Seega paigutasime funktsiooni openSnackbar () komponendiDidMount elutsükli meetodiks, mis käivitub kohe pärast seda, kui teataja komponent on DOM-i paigaldatud.</p><p>Funktsioonile openSnackbar () juurdepääsuks kuskil meie rakenduses peame selle väärtuse seadma teisele funktsioonile, mis on saadaval väljaspool komponenti Teavitaja. Seetõttu kirjutame, et klassi Open Notna kohal olev openSnackbarFn laiendab React.Componenti.</p><p>Nende tükkide kokku panemine:</p><p>Määratlegem nüüd funktsioon openSnackbar (). See funktsioon värskendab meie teataja oleku avatud ja sõnumi atribuute. Kui olekut on värskendatud, muudetakse teatajakomponent uuesti sõnumi kuvamiseks (avatud: tõene kuvab suupisteriba ja teade: teade seab sõnumi).</p><p>See.setState sees oleksime võinud sõnumi kirjutada sõnumina: sõnum. Selle asemel kasutasime koodi täpsemaks muutmiseks ES6 lühisüntaksi (jõustas Eslint).</p><p>3. Kui kasutaja klõpsab väljaspool suupiste riba, peaks suupiste suletama. Selle käitumise eest vastutab suupistebaar onClose. Kirjutame funktsiooni handleSnackbarClose (), mis avab vale ja sõnum tühja stringi.</p><p>4. Lõpuks kirjutame meie teavituskomponendile koodi, et muuta suupisteriba koos kõigi vajalike rekvisiitidega.</p><p>Lisaks ülalkirjeldatud teatele onClose ja avatud rekvisiidid lisame meie suupisteriba komponendile järgmised rekvisiidid:</p><ul><li>anchorOrigin: määrab suupisteriba asukoha</li><li>autoHideDuration: määrab suupisteriba kestuse millisekundites</li><li>SnackbarContentProps: seob suupisteriba DOM-i sisestusega elemendiga, mis sisaldab sõnumit; meie juhul on elemendil id snackbar-message-id ja suupisteriba kuvab selle elemendi teksti.</li></ul><p>Siin on meie teataja komponendi render () meetod:</p><p>Elemendis <span> oleksime võinud kirjutada sõnumi = {this.state.message}, kuid selle asemel kirjutasime ohtlikultSetInnerHTML = {{__html: this.state.message}}. See võimaldab meil lisada Snackbari sõnumiprofiili HTML-koodi. Näiteks võiksite kasutajatele näidata hüperlinki. Lisateave ohtlikultSetInnerHTML-i kasutamise kohta Reaktis.</p><p>Pärast punktidest 1–4 koodi kokku panemist on siin meie viimane teavituskomponent:</p><p>Oluline märkus. Pange tähele, kuidas me lisaks komponendile Notifier eksportisime ka funktsiooni openSnackbar (). Importime oma registrilehele nii openSnackbar () kui ka Notifier.</p><h3>Impordi teataja komponent registrilehele</h3><p>Naaseme tagasi meie registerlehele, kus impordime oma komponendi Notifier ja funktsiooni openSnackbar ().</p><p>Ilma funktsiooni openSnackbar () käivitamata jääb meie teavituskomponent alati algsesse suletud olekusse, kui teates on tühi string. Pärast seda, kui kasutaja on vormi esitanud, klõpsates nuppu meie registri lehel, peame käivitama openSnackbar (). Määratleme funktsiooni showNotifier (), mis teeb täpselt seda.</p><h4>showNotifier funktsioon</h4><p>Elemendi <vorm> sees kutsume showNotifier (). Kui kasutaja sisestab vormile numbri ja klõpsab nupul „Esita”, paneme showNotifier () käima.</p><p>Siin on praegune <vorm> meie registerlehel:</p><p>Teeme kaks muudatust:</p><p>1. ShowNotifier () helistamiseks, kui vorm on esitatud, kasutame JavaScripti edastatavat sündmust:</p><p>2. Kasutaja sisestab tekstiväljale numbri. Selleks, et funktsioon showNotifier () pääseks juurde TextFieldi väärtusele, lisame TextFieldile Reacti ref-atribuudi.</p><p>Tekstivälja väärtuse saamiseks on kaks võimalust: koos selle.riigi ja viitega. Valisime ref, kuna this.state on kokkuvõtlikum. Siin on selgitus selle riigiga kirjutamise kohta ja siin on lisateavet viite kasutamise kohta Reaktis.</p><p>Määratlegem nüüd funktsioon showNotifier (). ShowNotifier () kõrgetasemeline ülevaade on järgmine:</p><p>Allpool kirjutame koodi kõigi kolme ülaltoodud kommentaari kohta.</p><ol><li>Me defineerime vastuse järgmiselt:</li></ol><p>See koodirida ütleb, et kui vastus on olemas (see tähendab, et element <sisend> lisatakse DOM-i), siis KUI vastus võrdub vastuse sisendi väärtusega, millele pääseb juurde väärtusega answerInput.value.</p><p>KUI vastussisestust pole, siis on kogu sulgudes olev lause vale ja vastus on null.</p><p>2. Kui kasutaja ei sisesta vastust meie vormile, vaid klõpsab nuppu „Esita“, kuvatakse järgmine teade: Tühi väli. Sisestage number.</p><p>3. Kui kasutaja sisestab 4 ja klõpsab nupul „Edasta”, käivitub meie funktsioon openSnackbar () ja kuvatakse järgmine teade: Õige vastus !. Vastasel korral kuvatakse see Vale vastus.</p><p>Me kasutame parseInt (vastus, 10), et sõeluda vastus, mis on string, ja tagastada täisarv. Parameeter 10 täpsustab, et täisarv on kümnendvormingus.</p><p>Pangem kokku ülaltoodud toimingute 1–3 kood meie funktsiooni showNotifier jaoks. Paigutame koodi otse rea klassi alla. Indeks laiendab React.Component:</p><p>Võite märgata, et lisasime rea event.preventDefault () ;. See takistab meie elemendi <form> vaikimisi käitumist vormingu andmete serverisse saatmisel.</p><p>Nüüd on meil kõik oma lõpliku registrilehe kood:</p><h3>Testimine</h3><p>Proovime, kas meie teataja töötab ootuspäraselt. Käivitage rakendus lõnga dev abil ja liikuge saidile http: // localhost: 3000. Kui te ei tööta rakendust, minge sellesse, mille ma juurutasin: https://notifier.builderbook.org.</p><p>Esiteks klõpsake tekstiväljale midagi lisamata nuppu „Esita”.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558896000.png" /><p>Järgmisena lisage number 4 ja klõpsake nuppu “Esita”.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558896951.png" /><p>Nüüd lisage mõni muu number ja klõpsake nuppu „Esita”.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558897889.png" /><p>Pidage meeles, et me kirjutasime koodi suupisteriba sulgemiseks, kui kasutaja sellel klõpsab (kirjutasime funktsiooni handleSnackbarClose () ja edastasime selle suupisteriba onClose-i rekvisiidile). Pärast suupisteriba nägemist klõpsake ekraanil ükskõik kus peale suupisteriba. Suupisteriba peaks viivitamatult sulguma.</p><p>Material-UI kena funktsioon on mobiilide optimeerimine. Mobiilseadmetes hea välja nägemiseks ei pea me oma infosõnumi jaoks lisakoodi kirjutama. Vaadake ise, minnes Chrome'i DevToolsi ja muutes vaate töölaual mobiilile. Meie teade kuvatakse ekraani ülaservas:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558899962.png" /><p>Woohoo! Olete edukalt lisanud rakendusesisese teavitussõnumi veebiaadressile React! Teie lõplik kood peaks ühtima koodiga, mis asub meie ehitajaraamatu repo juhendites / 4-otsas kaustas.</p><h4>Kohanda teataja komponenti</h4><p>Nüüd, kui teil on töötav teatajakomponent, vaatame, kuidas saaksime UX-d muuta, muutes Material-UI SnackBari komponendi rekvisiite. Siin on täielik rekvisiitide loetelu, mida saate kasutada.</p><p>Esiteks muutkem suupisteriba kestust. Leidke oma teatajakomponendist sisestuspunkt autoHideDuration. Muutke selle väärtus 3000-lt 1000-le ja võrrelge. Näete, et kell 1000 sulgub suupisteriba kiiremini.</p><p>Teiseks muudame suupisteriba asukohta. Leidke tugipilt anchorOrigin ja muutke selle väärtusi vastavalt ülalt ja paremalt allapoole ja vasakule. Kontrollige, kus suupisteriba nüüd kuvatakse:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558900960.png" /><p>Lõpuks lubagem, et suupisteriba sisaldab hüperlinki. Tuletame meelde, et lisasime suupisteribal olevale sõnumiprogrammile ohtlikultSetInnerHTML = {{__html: this.state.message}}, et saaksime sellesse HTML-i kirjutada.</p><p>Muutke meie õige vastuse koodi! ja vale vastus. sellised sõnumid:</p><p>Nüüd näevad kasutajad allolevaid sõnumeid. Pange tähele <a> siltide teksti tumesiniseid hüperlinke.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558901980.png" /><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558902981.png" /><p>Kui õpite JavaScripti abil veebirakenduste loomist, vaadake meie Githubi repot ja meie raamatut, kus käsitleme seda ja paljusid teisi teemasid üksikasjalikult.</p><p>Meie õpetuste e-posti teel värskenduste saamiseks tellige siit.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Vaata ka</h4><a href="/article/what-is-a-chatbot-and-how-to-use-it-for-your-business-148e00/" title="Mis on Chatbot ja kuidas seda oma ettevõtte jaoks kasutada?">Mis on Chatbot ja kuidas seda oma ettevõtte jaoks kasutada?</a><a href="/article/how-to-chill-the-f-out-and-reduce-stress-1e3b2a/" title="Kuidas jahutada F välja ja vähendada stressi.">Kuidas jahutada F välja ja vähendada stressi.</a><a href="/article/how-to-connect-data-to-streamr-in-5-minutes-1-of-3-9bb090/" title="Andmete ühendamine voogesitajaga 5 minutiga (1/3)">Andmete ühendamine voogesitajaga 5 minutiga (1/3)</a><a href="/article/how-to-write-upgradable-smart-contracts-in-solidity-b40357/" title="Kuidas kindlalt uuendatavaid nutikaid lepinguid kirjutada!">Kuidas kindlalt uuendatavaid nutikaid lepinguid kirjutada!</a><a href="/article/learning-how-to-find-grace-in-dementia-cb915b/" title="Dementsuse armu leidmise õppimine">Dementsuse armu leidmise õppimine</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="vn flag"></i></a><a href="https://uk.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="ua flag"></i></a><a href="https://tr.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="tr flag"></i></a><a href="https://th.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="th flag"></i></a><a href="https://sv.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="ch flag"></i></a><a href="https://sr.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="rs flag"></i></a><a href="https://sl.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="si flag"></i></a><a href="https://sk.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="sk flag"></i></a><a href="https://ru.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="ru flag"></i></a><a href="https://ro.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="ro flag"></i></a><a href="https://pt.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="pt flag"></i></a><a href="https://pl.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="pl flag"></i></a><a href="https://de.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="de flag"></i></a><a href="https://ar.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="sa flag"></i></a><a href="https://bg.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="bg flag"></i></a><a href="https://cs.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="cz flag"></i></a><a href="https://da.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="dk flag"></i></a><a href="https://el.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="gr flag"></i></a><a href="https://ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="es flag"></i></a><a href="https://fi.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="fi flag"></i></a><a href="https://fr.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="fr flag"></i></a><a href="https://hi.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="in flag"></i></a><a href="https://hr.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="hr flag"></i></a><a href="https://hu.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="hu flag"></i></a><a href="https://id.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="id flag"></i></a><a href="https://it.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="it flag"></i></a><a href="https://ja.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="jp flag"></i></a><a href="https://ko.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="kr flag"></i></a><a href="https://lt.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="lt flag"></i></a><a href="https://lv.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="lv flag"></i></a><a href="https://ms.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="my flag"></i></a><a href="https://nl.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="nl flag"></i></a><a href="https://no.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="no flag"></i></a><a href="https://uz.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a/"><i class="uz flag"></i></a></div>ceadesc.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>