Uvod u obrasce React

Kao što znamo da su obrasci važan dio web aplikacije, stoga je potrebno imati znanje o dizajniranju obrazaca kao reakciju. U ovom ćemo članku vidjeti koje su različite vrste oblika dostupnih u reakciji, njihovu sintaksu i nekoliko primjera povezanih s reakcijskim oblicima.

Ovdje je osnovna sintaksa reaktivnih oblika,

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:


);
)
)

Gornja sintaksa pokazuje kako je stvoren oblik za reakciju. Trebat će stvoriti klasu koja proširuje React. Metoda sastavljanja i prikazivanja sadrži oznaku obrasca u njoj. Kao što možemo vidjeti render sadrži oznaku obrasca unutar koje imamo oznaku za prikazivanje teksta, a zatim oznaku tipa unosa sličnu HTML-u. Ovdje smo odredili predavanje događaja i promjene događaja na gumbu i tekstu.

Vrste oblika u React

U osnovi postoje dvije vrste oblika u reakciji. Oni su,

1. Kontrolirani unos

Smatra se da je reakcijski oblik kontroliran kad reakcijska komponenta koja je odgovorna za prikazivanje također kontrolira ponašanje obrasca na sljedećim ulazima. To znači da kada vrijednosti obavijeste promjene, komponenta spremi promijenjenu vrijednost u svoje stanje. Pogledajmo primjer,

Kodirati:

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;

U gornjem primjeru svaki put kada se promijeni vrijednost korisničkog imena, poziva se obrađivač događaja promjene i njegova ažurirana vrijednost sprema se u stanje. Stoga se kontrolirani obrazac može koristiti za primjenu provjera valjanosti, onemogućavanje gumba dok tekstualno polje ne sadrži neki tekst itd.

2. Nekontrolirani obrasci

Nekontrolirani oblici slični su HTML obrascima. To ne koristi nijedan slušatelj. Ovo je potrebno da bi se dobila vrijednost polja u traženom vremenu, na primjer, klikanjem gumba. Potrebna vrijednost očitava se referencom koja je povezana s elementima forme. Ovako je definirana referenca,

Kodirati:



Gornji "valueref" koristi se za čitanje vrijednosti polja poput,

this.refs.valueref.value

Iz gornje rasprave jasno razumijemo kontrolirane i nekontrolirane forme za reagiranje.

Primjeri oblika u React

Ispod su navedeni neki primjeri

Primjer 1

Za početak stvari koristit ćemo jednostavno tekstno polje u našem obliku. Ovdje je kôd koji prikazuje tekstualno polje za unos korisničkog imena.

Kodirati:

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

Unesite svoje korisničko ime:

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

Izlaz:

Primjer 2

Sada ćemo pokriti još jedan primjer koji prikazuje kako se tekstno polje koristi s gumbom za slanje i kako se postupa s događajima povezanim s klikom na gumb. Kod ispod naveden je,

Kodirati:

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)

Unesite svoje korisničko ime i kliknite prijavu:


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

Izlaz:

Kad se upiše korisničko ime, pokrenuće se slušatelji i zaglavlje će se dinamično mijenjati.

Nakon što kliknete gumb za slanje, pokrenut će se događaj slanja i prikazat će se upozorenje kao što je priloženo u nastavku,

Primjer 3

U ovom ćemo primjeru vidjeti kako se u obliku koristi više polja. Ovdje imamo dva polja za unos firstName i lastName. Koristili smo alat za obradu događaja promjene da bismo dinamički promijenili sadržaj teksta s promjenom njihovih vrijednosti.

Kodirati:

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)

Unesite ime:


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

Unesite prezime:

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

U nastavku priloženi izlaz prikazuje dva tekstualna polja za unos imena i prezimena. Promjenom sadržaja imena i prezimena mijenja se gore postavljeno zaglavlje.

Izlaz:

Zaključak

U gornjoj raspravi imamo jasno razumijevanje oblika za reagiranje. Osim gore navedenih primjera, možemo pružiti i više prilagodbi obrazaca prema našim potrebama. Oblik je važna komponenta reakcije i treba ga upotrijebiti za višekratnu uporabu.

Preporučeni članci

Ovo je vodič za Obrasce u React-u. Ovdje smo raspravljali o uvođenju i vrstama obrazaca u reakciji, zajedno s njegovim primjerima i implementacijom koda. Možete pogledati i sljedeće članke da biste saznali više -

  1. Razlika između ReactJS i Angular2
  2. Top 5 najboljih okvira JavaScripta
  3. Pitanja o intervjuima za WinForms (osnovna, napredna)
  4. React Native vs React
  5. Vodič za različite JavaScript događaje

Kategorija:

Razvoj softvera