Formulare und Ereignisse in React verstehen

In diesem Lernprogramm erfahren Sie mehr über Formulare und Ereignisse in React. Wir beginnen mit dem Erstellen einer einfachen auf React basierenden App und fügen dann ein Formular und einige Elemente hinzu. Dann erfahren Sie, wie Sie den Formularelementen Ereignisse hinzufügen.

Wenn Sie ein Anfänger von React sind, würde ich empfehlen, das Einführungs-Tutorial zu React zu lesen, um zu beginnen.

Fertig machen

Beginnen wir mit der Einrichtung unserer React-Webanwendung. Erstellen Sie einen Projektordner mit dem Namen ReactFormApp. Innerhalb ReactFormApp, Erstellen Sie eine Datei namens index.html und fügen Sie den folgenden HTML-Code hinzu:

Initialisieren Sie das Projekt mit Node Package Manager (npm)..

npm init

Füllen Sie die erforderlichen Angaben aus und Sie sollten die package.json Datei in der ReactFormApp Mappe.

"name": "reactformapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \" Fehler : Kein Test angegeben \ "&& exit 1", "author": "", "license": "ISC"

Installiere das reagieren und reagieren dom Abhängigkeiten mit npm.

Installieren Sie npm reave-dom --save

Installieren Sie das benötigte Babel-Paket mit npm und speichern Sie es im package.json Datei.

npm install --save-dev webpack webpack-dev-server Babel-Core Babel-Loader Babel-Preset-React Babel-Preset-Es2015

Babel Pakete werden benötigt, um den JSX-Code in JavaScript umzuwandeln.

Erstellen Sie eine Webpack-Konfigurationsdatei, um die Webpack-Konfigurationen zu verarbeiten. Erstellen Sie eine Datei mit dem Namen webpack.config.js und fügen Sie die folgenden Konfigurationen hinzu:

module.exports = entry: './app.js', Ausgabe: Dateiname: 'bundle.js', Modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [ ] = es2015 & Presets [] = reagieren ']

app.js ist die Datei, in der sich unser React-Code befindet. Erstellen Sie eine Datei mit dem Namen app.js in der ReactFormApp Mappe. Importieren Sie die erforderlichen Reaktibibliotheken in app.js. Erstellen Sie eine aufgerufene Komponente App ein div mit etwas text haben. Rendern Sie die Komponente mit der Render-Methode. Hier ist wie das Grundlegende app.js Datei würde aussehen:

import React aus 'reagieren' import render aus 'react-dom' var App = React.createClass (render: function () return ( 
 TutsPlus - Willkommen bei der React Form App 
 ); ); machen((  ), document.getElementById ('app'))

Speichern Sie die Änderungen und versuchen Sie, den Webpack-Entwicklungsserver neu zu laden.

webpack-dev-server

Nach dem Neustart des Servers sollten Sie die React-App unter http: // localhost: 8080 / anzeigen können..

Erstellen eines Reaktionsformulars

Wir haben die grundlegende React-App in Betrieb. Lass uns zum nächsten Schritt übergehen und versuchen, eine Formularkomponente mit JSX-Code in zu erstellen app.js.

Erstellen Sie eine aufgerufene Komponente FormComp Innerhalb app.js.

var FormComp = React.createClass (render: function () return ();)

In der Renderfunktion für FormComp definieren wir den HTML-Code zum Erstellen eines Formulars. Wir fügen ein paar Etiketten, Eingabefelder und eine Schaltfläche zum Klicken ein. So sieht es aus:

var FormComp = React.createClass (render: function () return ( 
 
TutsPlus - Tutorial zum Reagieren von Formularen
 
 Vorname:   
 Nachname:   
  
 
 ); )

Rendern Sie die Formularkomponente FormComp um das Formular darin anzuzeigen index.html.

machen((  ), document.getElementById ('app'))

Speichern Sie die Änderungen und starten Sie den Webpack-Server neu. Das Formular sollte nun angezeigt werden.

Ereignisse zum Formular hinzufügen

Unsere Reaktionsform ist in gutem Zustand. Damit es interagieren kann, müssen wir dem Formular Ereignisse hinzufügen. 

Wir fangen damit an, Zustandsvariablen in jedes Eingabefeld einzufügen, damit wir die Werte der Eingabefelder lesen können. Setzen wir die Zustandsvariablen für den ersten Namen und die letzten Eingabetextfelder.

Stellen Sie sicher, dass Sie den Anfangsstatus für die obigen Variablen festlegen. Definiere das getInitialState Funktion innerhalb der FormComp Komponente und initialisieren beide Variablen.

getInitialState: function () return lName: ", fName:"; ,

Wir müssen das Änderungsereignis der Eingabefelder behandeln und die Zustandsvariablen zuweisen, wenn sich der Wert in den Textfeldern ändert. Definiere also ein bei Änderung Ereignis auf den Eingabefeldern.

Definiere das bei Änderung Funktionen innerhalb der FormComp und setzen Sie die Zustandsvariablen.

handleFNameChange: function (event) this.setState (fName: event.target.value); , handleLNameChange: function (event) this.setState (lName: event.target.value); 

Versuchen wir, die Zustandsvariablen mit ihnen darzustellen. In der FormComp Fügen Sie in HTML das folgende Element hinzu, das die Zustandsvariablen darstellt.

Ihr voller Name lautet 
 this.state.fName this.state.lName

Speichern Sie die Änderungen und starten Sie den Webpack-Server erneut. Versuchen Sie, etwas Text in die Textfelder Vorname und Nachname einzugeben, und Sie sollten die Ergebnisse sofort nach der Eingabe anzeigen können.

Als Nächstes fügen Sie der Schaltfläche "Senden" in unserem Formular ein Ereignis zum Klicken hinzu.

Definiere das handleClick Funktion innerhalb der FormComp Komponente. Wenn Sie auf die Schaltfläche "Senden" klicken, verketten wir sowohl den Vornamen als auch den Nachnamen und zeigen den vollständigen Namen im Formular an. Hier ist der handleClick Funktion:

handleClick: function () var fullName = this.state.fName + "+ this.state.lName; this.setState (Name: fullName);,

Initialisieren Sie auch das Name Variable in der getInitialState Funktion.

getInitialState: function () return lName: ", fName:", Name: ";

Zeigen Sie den verketteten vollständigen Namen im HTML-Formular an.

Ihr voller Name lautet 
 this.state.Name

Hier ist wie das Finale FormComp Bauteil sieht aus:

var FormComp = React.createClass (getInitialState: function () return lName: ", fName:", Name: ";, handleFNameChange: function (event) this.setState (fName: event.target.value) ); handleLNameChange: function (event) this.setState (lName: event.target.value);, handleClick: function () var fullName = this.state.fName + "+ this.state. lName; this.setState (Name: fullName);, render: function () return ( 
 
TutsPlus - Tutorial zum Reagieren von Formularen
 
 Vorname:   
 Nachname:   
  
 
Ihr voller Name lautet 
 this.state.Name 
 ); )

Speichern Sie die obigen Änderungen und starten Sie den Entwicklungsserver neu. Geben Sie beide Namen ein und drücken Sie die Senden-Schaltfläche. Der vollständige Name sollte angezeigt werden.

Verpacken

In diesem React-Lernprogramm haben Sie erfahren, wie Sie mit der Erstellung von React-Apps beginnen können. Außerdem haben Sie die grundlegenden Konzepte zum Umgang mit Formularen und Ereignissen in einer React-basierten Webanwendung kennen gelernt. Ich hoffe, dass dieses Tutorial für Sie hilfreich ist, wenn Sie mit der Erstellung von React-basierten Apps beginnen.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.

Teilen Sie uns Ihre Gedanken, Vorschläge oder Korrekturen in den Kommentaren unten mit. Beobachten Sie diesen Bereich für weitere React-Tutorials.