Share
I denne opplæringen lærer du om skjemaer og hendelser i React. Vi starter med å lage en enkel React-basert app, og deretter legge til et skjema og noen elementer. Da ser vi hvordan du legger til hendelser i skjemaelementene.
Hvis du er nybegynner med React, vil jeg anbefale å lese introduksjonsveiledningen på React for å komme i gang.
La oss starte med å sette opp vårt React-webprogram. Opprett en prosjektmappe som heter ReactFormApp. Innsiden ReactFormApp, opprett en fil som heter index.html og legg til følgende HTML-kode:
TutsPlus - React Forms & Events
Initialiser prosjektet ved hjelp av Node Package Manager (npm).
npm init
Fyll ut de nødvendige detaljene, og du bør ha package.json fil inne i ReactFormApp mappe.
"navn": "reaktordapp", "versjon": "1.0.0", "beskrivelse": "", "hoved": "index.js", "skript": "test": "echo \" feil : ingen test oppgitt \ "&& exit 1", "forfatter": "", "lisens": "ISC"
Installer reagere og reagere-dom avhengigheter ved bruk av npm.
npm installere reagerer reagerer dom - save
Installer den nødvendige babelpakken med npm og lagre den på package.json fil.
npm installere -save-dev web-pakke webpack-dev-server babel-core babel-loader babel-preset-reagerer babel-preset-es2015
babel Det kreves pakker for å omforme JSX-koden til JavaScript.
Opprett en webpack-konfigurasjonsfil for å håndtere webpackkonfigurasjonene. Opprett en fil som heter webpack.config.js og legg til følgende konfigurasjoner:
module.exports = entry: './app.js', output: filnavn: 'bundle.js',, modul: loaders: [ekskluder: / node_modules /, loader: 'babel-loader? ] = es2015 og forhåndsinnstillinger [] = reagere ']
app.js er filen der vår React-kode vil oppholde seg. Opprett en fil som heter app.js inne i ReactFormApp mappe. Importer de nødvendige reaksjonsbibliotekene i app.js. Opprett en komponent som heter app ha en div med litt tekst. Gjenfør komponenten ved hjelp av gjengivelsesmetoden. Her er hvordan det grunnleggende app.js filen ville se ut:
importere React fra 'reagere' import render fra 'react-dom' var App = React.createClass (render: function () return (TutsPlus - Velkommen til React Form App); ); gjengi ((), Document.getElementById ( 'app'))
Lagre endringene og prøv å laste om webpack-utviklingsserveren.
Webpack-dev-serveren
Når serveren er startet på nytt, bør du kunne se React-appen som kjører på http: // localhost: 8080 /.
Vi har den grunnleggende React-appen oppe og går, La oss gå videre til neste trinn, og prøv å lage en formkomponent ved hjelp av JSX-koden i app.js.
Opprett en komponent som heter FormComp innsiden app.js.
var FormComp = React.createClass (render: function () return ();)
Innenfor gjengivelsesfunksjonen for FormComp definerer vi HTML-koden for å lage et skjema. Vi legger inn et par etiketter, innmatingsbokser og en knapp for å klikke. Slik ser det ut:
var FormComp = React.createClass (render: function () return (); )TutsPlus - React Form Tutorial
Gi formkomponenten tilbake FormComp å vise skjemaet inne index.html.
gjengi ((), Document.getElementById ( 'app'))
Lagre endringene og start webpackserveren igjen, og du bør kunne se skjemaet.
Vår React-skjema er i god form. For å få det til å virke, må vi legge til hendelser i skjemaet.
Vi begynner med å legge til tilstandsvariabler på hver av inntastingsbokser, slik at vi kan lese verdiene til innboksene. La oss stille statlige variabler for fornavnet og de siste inntastede tekstbokser.
Pass på å angi startstatus for de ovennevnte variablene. Definer getInitialState fungere inne i FormComp komponent og initialiser begge variablene.
getInitialState: function () return lName: ", fName:"; ,
Vi må håndtere endringshendelsen til inntastingsboksene og tilordne tilstandsvariablene når verdien i tekstfeltene endres. Så definer en onChange hendelse på inngangs boksene.
Definer onChange Funksjoner inne i FormComp og sett tilstandsvariablene.
handleFNameChange: function (event) this.setState (fName: event.target.value); , handleLNameChange: function (event) this.setState (lName: event.target.value);
La oss prøve å gjengi tilstandsvariablene ved å bruke dem. Inne i FormComp HTML, legg til følgende element som gjengir statens variabler.
Ditt fulle navn er
this.state.fName this.state.lName
Lagre endringene og start webpackserveren på nytt. Prøv å skrive inn tekst i fornavn og etternavn tekstbokser, og du bør kunne se resultatene så snart du skriver.
Deretter la vi legge til et klikk-arrangement på send-knappen som vi har på vårt skjema.
Definer handleClick fungere inne i FormComp komponent. Ved å klikke på send-knappen, vil vi sammenkalle både fornavn og etternavn og vise hele navnet i skjemaet. Her er handleClick funksjon:
handleClick: function () var fullName = this.state.fName + "+ this.state.lName; this.setState (Name: fullName);,
Også, initialiserer Navn variabel i getInitialState funksjon.
getInitialState: funksjon () return lName: ", fName:", Name: ";
Vis det sammenkalte fulle navnet i skjemaet HTML.
Ditt fulle navn er
This.state.Name
Her er hvordan finalen FormComp komponent ser ut:
var Formatt = );, handleLNameChange: funksjon (hendelse) this.setState (lName: event.target.value);, handleClick: function () var fullName = this.state.fName + "+ this.state.fName +" + this.state. lName; this.setState (Name: fullName);, render: function () return (); )TutsPlus - React Form Tutorial
Ditt fulle navn er
This.state.Name
Lagre endringene ovenfor og start utviklingsserveren på nytt. Skriv inn begge navnene og trykk på send-knappen, og hele navnet skal vises.
I denne React-opplæringen lærte du hvordan du kom i gang med å lage React-apper og forstod de grunnleggende konseptene for hvordan å håndtere skjemaer og hendelser i en React-basert webapp. Jeg håper denne veiledningen vil være nyttig for deg i å komme i gang med å lage React-baserte apper.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker, forslag eller eventuelle rettelser i kommentarene nedenfor. Fortsett å se på denne plassen for flere React-opplæringsprogrammer.
Accentsconagua