Uvod v obrazce React

Ker vemo, da so obrazci pomemben del spletne aplikacije, je zato treba v reakciji imeti znanje o oblikovanju obrazcev. V tem članku bomo videli, kakšne so različne vrste oblik, ki so na voljo v reakciji, njihovo skladnjo in nekaj primerov, povezanih z reakcijskimi oblikami.

Tu je osnovna skladnja reaktivnih oblik,

Sintaksa:

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:


);
)
)

Zgornja skladnja prikazuje, kako je ustvarjena oblika za odzivanje. Potrebno bo ustvariti razred, ki podaljša React. Metoda komponent in upodabljanja bo v njej imela oznako obrazca. Kot lahko vidimo upodabljanje vsebuje oznako obrazca, znotraj katere imamo oznako za prikazovanje besedila, ki ji sledi vnosna oznaka vrste, podobna HTML-ju. Tu smo določili pošiljanje dogodkov in spreminjanje dogodkov na gumbu in besedilu.

Vrste obrazcev v React

V bistvu obstajata dve vrsti oblik v reakciji. So,

1. Nadzorovan vnos

Šteje se, da je reakcijska oblika nadzorovana, kadar reakcijska komponenta, ki je odgovorna za upodabljanje, nadzoruje tudi obnašanje obrazca na naslednjih vhodih. To pomeni, da vsakič, ko vrednosti sporočijo spremembe, komponenta shrani spremenjeno vrednost v njeno stanje. Poglejmo primer,

Koda:

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;

V zgornjem primeru se vsakič, ko se vrednost uporabniškega imena spremeni, pokliče upravljavec dogodkov sprememb in njegova posodobljena vrednost se shrani v stanje. Zato lahko nadzorovan obrazec uporabite za preverjanje veljavnosti, onemogočanje gumba, dokler besedilno polje ne vsebuje besedila itd.

2. Nenadzorovani obrazci

Nenadzorovani obrazci so podobni obrazcem HTML. To poslušalcev ne izkoristi. To je potrebno, da dobite vrednost polja v želenem času, na primer s klikom gumba. Zahtevana vrednost se odčita z referenco, povezano z elementi obrazca. Tako je določena referenca,

Koda:



Zgoraj uporabljeni vrednost valueref se uporablja za branje vrednosti polja kot npr.

this.refs.valueref.value

Iz zgornje razprave imamo jasno razumevanje nadzorovanih in nenadzorovanih oblik reagiranja.

Primeri obrazcev v React

Spodaj je navedenih nekaj primerov

Primer # 1

Za začetek bomo uporabili preprosto besedilno polje v obliki. Tu je koda, ki prikazuje besedilno polje za vnos uporabniškega imena.

Koda:

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

Vnesite svoje uporabniško ime:

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

Izhod:

Primer # 2

Zdaj bomo obravnavali še en primer, ki prikazuje, kako se besedilno polje uporablja z gumbom za oddajo in kako ravnati z dogodki, povezanimi s klikom gumba. Spodnja koda ima:

Koda:

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)

Prosimo, vnesite svoje uporabniško ime in kliknite Pošlji:


type = 'besedilo'
onChange = (this.changeEventHandler)
/>
type = 'Pošlji'
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

Izhod:

Ko vnesete uporabniško ime, se bodo poslušalci sprožili in glava se bo dinamično spreminjala.

Po kliku gumba za oddajo bo sprožen dogodek oddaje in prikazano bo opozorilo, kot je priloženo spodaj,

Primer # 3

V tem primeru bomo videli, kako se v obrazcu uporablja več polj. Tu imamo dve polji za vnos firstName in lastName. Z dinamičnim spreminjanjem vsebine besedila s spremembo ustreznih vrednosti smo uporabili sredstvo za upravljanje sprememb.

Koda:

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)

Vnesite ime:


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

Vnesite priimek:

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

Spodaj priloženi izhod prikazuje dve besedilni polji za vnos imena in priimka. S spremembo vsebine imena in priimka se spremeni zgoraj postavljena glava.

Izhod:

Zaključek

V zgornji razpravi imamo jasno razumevanje oblik za odzivanje. Poleg zgornjih primerov lahko oblikujemo tudi več prilagoditev obrazcev glede na naše potrebe. Oblika je pomembna sestavina reakcije in je namenjena ponovni uporabi.

Priporočeni članki

To je vodnik za obrazce v React. Tukaj razpravljamo o uvedbi in vrstah obrazcev v reagiranju, skupaj z njegovimi primeri in implementacijo kode. Če želite izvedeti več, si oglejte tudi naslednje članke -

  1. Razlika med ReactJS in Angular2
  2. Najboljših 5 najboljših okvirov Javascripta
  3. Vprašanja o intervjuju za WinForms (osnovna, napredna)
  4. React Native vs React
  5. Vodnik po različnih JavaScript dogodkih

Kategorija:

Razvoj programske opreme