Introducere în formulare în reacție

După cum știm că formularele sunt o parte importantă a unei aplicații web, de aceea este necesar să avem cunoștințe despre proiectarea formularelor în reacție. În acest articol, vom vedea care sunt un tip diferit de forme disponibile în reacție, sintaxa lor și câteva exemple legate de formele de reacție.

Iată o sintaxă de bază a formelor de reacție,

Sintaxă:

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:


);
)
)

Sintaxa de mai sus arată cum este creată o formă pentru a reacționa. Va fi necesară crearea unei reacții de extindere a clasei. Componenta și metoda de redare vor avea o etichetă de formular în ea. După cum putem vedea redarea conține o etichetă de formular în cadrul căreia avem o etichetă pentru afișarea textului urmată de etichetă de tip de intrare similară cu HTML. Aici am specificat trimiterea evenimentelor și modificarea evenimentelor pe buton și respectiv pe text.

Tipuri de forme în reacție

Practic, există două tipuri de forme în reacție. Sunt,

1. Intrare controlată

O formă de reacție este considerată a fi controlată atunci când o componentă de reacție care este responsabilă de redare controlează, de asemenea, comportamentul formei pe intrările ulterioare. Asta înseamnă că ori de câte ori valorile informează schimbările, componenta salvează valoarea modificată la starea sa. Să vedem un exemplu,

Cod:

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;

În exemplul de mai sus, de fiecare dată când se schimbă valoarea de nume de utilizator, se apelează gestionatorul de evenimente de modificare, iar valoarea actualizată a acestuia este salvată în stare. Prin urmare, formularul controlat poate fi utilizat pentru aplicarea validărilor, dezactivarea unui buton până când un câmp de text conține ceva text etc.

2. Formulare necontrolate

Formularele necontrolate sunt similare cu formularele HTML. Acest lucru nu folosește niciun ascultător. Acest lucru este necesar pentru a obține valoarea câmpului la timpul dorit, de exemplu, pe un buton. Valoarea necesară este citită folosind o referință asociată elementelor de formular. Astfel este definită referința,

Cod:



„Valueeref” utilizat mai sus este utilizat pentru a citi valoarea câmpului ca,

this.refs.valueref.value

Din discuția de mai sus, avem o înțelegere clară a formelor controlate și necontrolate pentru a reacționa.

Exemple de forme în reacție

Mai jos sunt menționate câteva exemple

Exemplul # 1

Pentru a începe lucrurile, vom folosi un câmp text simplu în forma noastră. Iată un cod care arată un câmp text pentru a introduce un nume de utilizator.

Cod:

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

Vă rugăm să introduceți numele dvs. de utilizator:


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

ieşire:

Exemplul # 2

Acum vom acoperi un alt exemplu care arată cum se utilizează un câmp text cu un buton de trimitere și cum se pot gestiona evenimentele legate de apăsarea unui buton. Codul de mai jos are,

Cod:

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)

Vă rugăm să introduceți numele de utilizator și faceți clic pe Trimiteți:


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

ieşire:

Când numele de utilizator este introdus, ascultătorii vor fi declanșați și antetul se va schimba dinamic.

După ce faceți clic pe butonul de trimitere, evenimentul de trimitere va fi declanșat și va fi afișată o alertă ca cea atașată mai jos,

Exemplul # 3

În acest exemplu, vom vedea cum sunt utilizate mai multe câmpuri într-un formular. Aici avem două câmpuri pentru introducerea prenumelui și prenumelui. Am folosit un manipulator de evenimente de schimbare pentru a schimba dinamic conținutul unui text cu o modificare a valorilor respective.

Cod:

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)

Introduceți numele:


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

Introduceți numele de familie:

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

Ieșirea de mai jos prezintă două câmpuri de text pentru introducerea prenumelui și prenumelui. Odată cu modificarea conținutului prenumelui și prenumelui, antetul plasat mai sus este modificat.

ieşire:

Concluzie

În discuția de mai sus, avem o înțelegere clară a formelor de reacție. În afară de exemplele de mai sus, putem oferi mai multe personalizări pentru formulare conform nevoilor noastre. Forma este o componentă importantă de reacție și este menită să fie reutilizabilă.

Articole recomandate

Acesta este un ghid pentru formularele în reacție. Aici vom discuta despre introducerea și tipurile de forme în reacție, împreună cu exemplele și implementarea codului. De asemenea, puteți consulta următoarele articole pentru a afla mai multe-

  1. Diferența dintre ReactJS și Angular2
  2. Top 5 Cele mai bune cadre JavaScript
  3. Întrebări la interviu WinForms (de bază, avansat)
  4. Reactează nativul și reacționează
  5. Ghid pentru diferite evenimente JavaScript

Categorie:

Dezvoltare de software