Inleiding tot formulieren in React

Omdat we weten dat formulieren een belangrijk onderdeel van een webtoepassing zijn, is het daarom noodzakelijk om kennis te hebben over het ontwerpen van formulieren. In dit artikel zullen we zien wat een ander type formulieren beschikbaar zijn in react, hun syntaxis en een paar voorbeelden met betrekking tot reactformulieren.

Hier is een basissyntaxis van reactvormen,

Syntaxis:

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:


);
)
)

De bovenstaande syntaxis laat zien hoe een formulier wordt gemaakt om te reageren. Het vereist een klasse die React uitbreidt. De component- en rendermethode bevatten een form-tag. Zoals we kunnen zien bevat render een formulier-tag waarbinnen we een label hebben voor het weergeven van tekst, gevolgd door een tag van het invoertype, vergelijkbaar met HTML. Hier hebben we gespecificeerd verzend evenementen en verander evenementen op respectievelijk knop en tekst.

Typen vormen in React

In principe zijn er twee soorten vormen die reageren. Zij zijn,

1. Gecontroleerde invoer

Een reactvorm wordt als gecontroleerd beschouwd wanneer een reactcomponent die verantwoordelijk is voor het renderen, ook het vormgedrag bij daaropvolgende invoer regelt. Dat betekent dat wanneer waarden wijzigingen informeren, de component de gewijzigde waarde in zijn status opslaat. Laten we een voorbeeld bekijken,

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;

In het bovenstaande voorbeeld wordt elke keer dat de gebruikersnaam verandert, de handler voor het wijzigen van gebeurtenissen aangeroepen en wordt de bijgewerkte waarde opgeslagen om deze te wijzigen. Daarom kan een gecontroleerd formulier worden gebruikt voor het toepassen van validaties, het uitschakelen van een knop totdat een tekstveld tekst bevat, enz.

2. Ongecontroleerde formulieren

Ongecontroleerde formulieren zijn vergelijkbaar met HTML-formulieren. Dit maakt geen gebruik van een luisteraar. Dit was nodig om de waarde van het veld op het gewenste tijdstip te krijgen, bijvoorbeeld door op een knop te klikken. De vereiste waarde wordt gelezen met behulp van een verwijzing die aan de formulierelementen is gekoppeld. Dit is hoe de referentie wordt gedefinieerd,

Code:



"Valueref" hierboven gebruikt wordt gebruikt om de waarde van het veld te lezen zoals,

this.refs.valueref.value

Uit de bovenstaande discussie hebben we een duidelijk begrip van gecontroleerde en ongecontroleerde vormen om te reageren.

Voorbeelden van vormen in React

Hieronder worden enkele voorbeelden genoemd

Voorbeeld 1

Om dingen te starten, gebruiken we een eenvoudig tekstveld in ons formulier. Hier is een code die een tekstveld toont om een ​​gebruikersnaam in te voeren.

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

Voer uw gebruikersnaam in:

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

Output:

Voorbeeld 2

Nu zullen we nog een voorbeeld behandelen dat laat zien hoe een tekstveld wordt gebruikt met een verzendknop en hoe gebeurtenissen met een klik op een knop kunnen worden afgehandeld. De onderstaande code heeft,

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)

Voer uw gebruikersnaam in en klik op verzenden:


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

Output:

Wanneer de gebruikersnaam wordt ingevoerd, worden luisteraars geactiveerd en verandert de kop dynamisch.

Nadat u op de verzendknop hebt geklikt, wordt de verzendgebeurtenis geactiveerd en wordt een waarschuwing weergegeven zoals hieronder is weergegeven,

Voorbeeld 3

In dit voorbeeld zullen we zien hoe meerdere velden in een formulier worden gebruikt. Hier hebben we twee velden voor het invoeren van voornaam en achternaam. We hebben een wijzigingsgebeurtenishandler gebruikt om de inhoud van een tekst dynamisch te wijzigen met een wijziging in hun respectieve waarden.

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)

Vul voornaam in:


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

Voer achternaam in:

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

De hieronder bijgevoegde uitvoer toont twee tekstvelden voor het invoeren van de voornaam en achternaam. Met de wijziging in de inhoud van de voornaam en achternaam, wordt de hierboven geplaatste koptekst gewijzigd.

Output:

Conclusie

In de bovenstaande discussie hebben we een duidelijk begrip van de te reageren vormen. Afgezien van de bovenstaande voorbeelden kunnen we volgens onze behoeften meer aanpassingen aan formulieren bieden. De vorm is een belangrijke reactiecomponent en is bedoeld om herbruikbaar te zijn.

Aanbevolen artikelen

Dit is een gids voor Formulieren in React. Hier bespreken we de introductie en soorten formulieren in reactie samen met zijn voorbeelden en code-implementatie. U kunt ook de volgende artikelen bekijken voor meer informatie-

  1. Verschil tussen ReactJS en Angular2
  2. Top 5 beste Javascript Frameworks
  3. WinForms Interview Vragen (Basic, Advanced)
  4. Reageren Native vs React
  5. Gids voor verschillende JavaScript-gebeurtenissen

Categorie:

Software ontwikkeling