Introduktion til formularer i reaktion

Da vi ved, at formularer er en vigtig del af en webapplikation, er det derfor nødvendigt at have viden om formdesign i reaktion. I denne artikel vil vi se, hvad der er en anden type formularer der er tilgængelige i react, deres syntaks og et par eksempler relateret til reaktionsformer.

Her er en grundlæggende syntaks af reaktionsformer,

Syntaks:

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:


);
)
)

Ovenstående syntaks viser, hvordan en form oprettes til at reagere. Det kræver, at der oprettes en klasse, der udvider reaktion. Komponent- og gengivelsesmetoden vil have et formularmærke i sig. Som vi kan se gengiver indeholder formularmærke, hvori vi har en etiket til at vise tekst efterfulgt af inputtype-tag, der ligner HTML. Her har vi specificeret indsendelsesbegivenheder og ændre begivenheder på henholdsvis knap og tekst.

Typer af formularer i reaktion

Grundlæggende er der to typer former, som reagerer. De er,

1. Kontrolleret input

En reaktionsform betragtes som kontrolleret, når en reaktionskomponent, der er ansvarlig for gengivelse, også styrer formadfærden på efterfølgende input. Det betyder, at når værdier informerer om ændringer, gemmer komponenten den ændrede værdi til dens tilstand. Lad os se et eksempel,

Kode:

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;

I ovenstående eksempel ændres hver gang værdien af ​​brugernavn, ændringshændelseshåndtereren kaldes, og dens opdaterede værdi gemmes i tilstand. Derfor kan kontrolleret form bruges til at anvende valideringer, deaktivere en knap, indtil et tekstfelt indeholder noget tekst osv.

2. Ukontrollerede formularer

Ukontrollerede formularer ligner HTML-formularer. Dette gør ikke brug af nogen lytter. Dette kræves for at få værdien af ​​feltet på det krævede tidspunkt, f.eks. Ved at klikke på en knap. Den krævede værdi læses ved hjælp af en reference, der er knyttet til formelementerne. Sådan defineres referencen,

Kode:



"Valueref" brugt ovenfor bruges til at læse værdien af ​​feltet som,

this.refs.valueref.value

Fra ovenstående diskussion har vi en klar forståelse af kontrollerede og ukontrollerede former til at reagere.

Eksempler på formularer i reaktion

Nedenfor er nævnt nogle eksempler

Eksempel 1

For at starte tingene bruger vi et simpelt tekstfelt i vores form. Her er en kode, der viser et tekstfelt for at indtaste et brugernavn.

Kode:

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

Indtast dit brugernavn:

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

Produktion:

Eksempel 2

Nu vil vi dække et andet eksempel, der viser, hvordan et tekstfelt bruges med en indsenderknap, og hvordan man håndterer begivenheder, der er relateret til et klik på en knap. Nedenstående kode har,

Kode:

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)

Indtast dit brugernavn, og klik på Send:


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

Produktion:

Når brugernavnet indtastes, udløses lyttere, og overskriften ændres dynamisk.

Når du har klikket på knappen Send, vil indsendelsesbegivenheden blive udløst, og en alarm vises som den vedhæftede nedenfor,

Eksempel 3

I dette eksempel vil vi se, hvordan flere felter bruges i en form. Her har vi to felter til indtastning af fornavn og efternavn. Vi har brugt en ændringshændelseshåndterer til dynamisk at ændre indholdet af en tekst med en ændring i deres respektive værdier.

Kode:

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)

Indtast fornavn:


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

Indtast efternavn:

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

Den nedenstående vedhæftede udgang viser to tekstfelter til indtastning af fornavn og efternavn. Med ændringen i indholdet af fornavnet og efternavnet ændres den ovenstående placerede header.

Produktion:

Konklusion

I ovenstående diskussion har vi en klar forståelse af former for reaktion. Bortset fra ovenstående eksempler kan vi give flere tilpasninger til formularer efter vores behov. Formen er en vigtig reaktionskomponent og er beregnet til at være genanvendelig.

Anbefalede artikler

Dette er en guide til formularer i reaktion. Her diskuterer vi introduktion og typer af former i reaktion sammen med dens eksempler og kodeimplementering. Du kan også se på de følgende artikler for at lære mere-

  1. Forskellen mellem ReactJS og Angular2
  2. Top 5 bedste Javascript-rammer
  3. WinForms Interview Spørgsmål (Grundlæggende, Avanceret)
  4. React Native vs React
  5. Vejledning til forskellige JavaScript-begivenheder

Kategori:

Softwareudvikling