Einführung in Formulare in React

Da wir wissen, dass Formulare ein wichtiger Bestandteil einer Webanwendung sind, ist es notwendig, Kenntnisse über das Entwerfen von Formularen zu haben. In diesem Artikel werden wir sehen, welche unterschiedlichen Formulartypen in react verfügbar sind, welche Syntax sie haben und welche Beispiele sich auf reagierende Formen beziehen.

Hier ist eine grundlegende Syntax von Reaktionsformen,

Syntax:

class FormClassName extends React.Component (
constructor(props) (
super(props);
// handle initialization activities
)
handleChangeEvents(event) (
//handle change events
)
handleSubmitevents(event) (
// handle submit events
)
render() (
return (

Name:


);
)
)

Die obige Syntax zeigt, wie ein Formular erstellt wird, um zu reagieren. Hierfür muss eine Klasse erstellt werden, die React erweitert. In der Komponente und der Rendermethode befindet sich ein Formular-Tag. Wie wir sehen können, enthält render ein Formular-Tag, in dem wir eine Beschriftung zum Anzeigen von Text haben, gefolgt von einem HTML-ähnlichen Eingabetyp-Tag. Hier haben wir Submit Events und Change Events für Button und Text festgelegt.

Arten von Formen in Reaktion

Grundsätzlich gibt es zwei Arten von Formen zu reagieren. Sie sind,

1. Kontrollierter Eingang

Ein Reaktionsformular gilt als gesteuert, wenn eine für das Rendern verantwortliche Reaktionskomponente auch das Formularverhalten bei nachfolgenden Eingaben steuert. Das heißt, wenn Werte Änderungen mitteilen, speichert die Komponente den geänderten Wert in seinem Zustand. Lassen Sie uns ein Beispiel sehen,

Code:

import React, ( Component ) from 'react';
class ControlledForm extends Component (
constructor () (
this.state = (
username: ''
)
)
changeEventHandler = event => (
this.setState((
username: event.target.value
));
)
render () (
return (
name="username"
value=(this.state.username)
onChange=(this.changeEventHandler)
/>
);
)
)
export default ControlledForm;

Im obigen Beispiel wird jedes Mal, wenn sich der Wert des Benutzernamens ändert, der Änderungsereignishandler aufgerufen und sein aktualisierter Wert im Status gespeichert. Daher kann das kontrollierte Formular zum Anwenden von Überprüfungen verwendet werden, um eine Schaltfläche zu deaktivieren, bis ein Textfeld Text enthält usw.

2. Unkontrollierte Formulare

Unkontrollierte Formulare ähneln HTML-Formularen. Hierbei wird kein Listener verwendet. Dies ist erforderlich, um den Wert des Feldes zum gewünschten Zeitpunkt abzurufen, beispielsweise durch Klicken auf eine Schaltfläche. Der erforderliche Wert wird mithilfe einer Referenz gelesen, die den Formularelementen zugeordnet ist. So wird die Referenz definiert,

Code:



"Valueref" oben verwendet wird, um den Wert des Feldes zu lesen, wie

this.refs.valueref.value

Aus der obigen Diskussion haben wir ein klares Verständnis für kontrollierte und unkontrollierte Formen, um zu reagieren.

Beispiele für Formen in Reaktion

Nachfolgend sind einige Beispiele aufgeführt

Beispiel 1

Zu Beginn verwenden wir ein einfaches Textfeld in unserem Formular. Hier ist ein Code, der ein Textfeld zur Eingabe eines Benutzernamens zeigt.

Code:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
render() (
return (
Hello

Bitte geben Sie Ihren Benutzernamen ein:

type = "text"
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Ausgabe:

Beispiel # 2

Jetzt werden wir ein weiteres Beispiel behandeln, das zeigt, wie ein Textfeld mit einer Senden-Schaltfläche verwendet wird und wie Ereignisse behandelt werden, die sich auf das Klicken einer Schaltfläche beziehen. Der folgende Code hat,

Code:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = ( username: '' );
)
submitmyeventHandler = (myevent) => (
alert("You are submitting " + this.state.username);
)
changeEventHandler = (myevent) => (
this.setState((username: myevent.target.value));
)
render() (
return (
Hello (this.state.username)

Bitte geben Sie Ihren Benutzernamen ein und klicken Sie auf Senden:


type = 'text'
onChange = (this.changeEventHandler)
/>
type = 'submit'
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Ausgabe:

Wenn der Benutzername eingegeben wird, werden Listener ausgelöst und der Header wird dynamisch geändert.

Nachdem Sie auf die Schaltfläche "Senden" geklickt haben, wird das Senden-Ereignis ausgelöst und eine Warnung wie die unten angehängte angezeigt.

Beispiel # 3

In diesem Beispiel wird gezeigt, wie mehrere Felder in einem Formular verwendet werden. Hier haben wir zwei Felder zur Eingabe von Vorname und Nachname. Wir haben einen Änderungsereignishandler verwendet, um den Inhalt eines Texts dynamisch zu ändern, wenn sich seine jeweiligen Werte ändern.

Code:

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

import React from 'react';
import ReactDOM from 'react-dom';
class TestForm extends React.Component (
constructor(props) (
super(props);
this.state = (
firstName: '',
lastName: null,
);
)
changeEventHandler = (event) => (
let nam = event.target.name;
let val = event.target.value;
this.setState(((nam): val));
)
render() (
return (
Welcome (this.state.firstName) (this.state.lastName)

Bitte Vornamen eingeben:


type = 'text'
name = 'firstName'
onChange = (this.changeEventHandler)
/>

Nachnamen eingeben:

type = 'text'
name = 'lastName'
onChange = (this.changeEventHandler)
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Die folgende Ausgabe zeigt zwei Textfelder zur Eingabe des Vor- und Nachnamens. Mit der Änderung des Inhalts des Vor- und Nachnamens wird die oben platzierte Überschrift geändert.

Ausgabe:

Fazit

In der obigen Diskussion haben wir ein klares Verständnis der zu reagierenden Formen. Abgesehen von den obigen Beispielen können wir Formulare nach unseren Wünschen anpassen. Die Form ist eine wichtige Reaktionskomponente und soll wiederverwendbar sein.

Empfohlene Artikel

Dies ist eine Anleitung für Formulare in React. Hier diskutieren wir die Einführung und Arten von Formularen in Reaktion mit ihren Beispielen und Code-Implementierung. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren.

  1. Unterschied zwischen ReactJS und Angular2
  2. Top 5 der Besten Javascript Frameworks
  3. Fragen zu WinForms-Vorstellungsgesprächen (Grundkenntnisse, Fortgeschrittene)
  4. Reagiere einheimisch vs Reagiere
  5. Leitfaden zu verschiedenen JavaScript-Ereignissen

Kategorie:

Software-Entwicklung