Úvod do reakcií

Pretože vieme, že formuláre sú dôležitou súčasťou webovej aplikácie, je potrebné mať vedomosti o navrhovaní formulárov v reakcii. V tomto článku sa dozvieme, aké sú rôzne typy foriem dostupných v reakcii, ich syntax a niekoľko príkladov týkajúcich sa reakčných foriem.

Toto je základná syntax reakčných foriem,

syntaxe:

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:


);
)
)

Vyššie uvedená syntax ukazuje, ako je formulár vytvorený, aby reagoval. Vyžaduje si to vytvorenie triedy rozširujúcej React. Metóda komponentu a renderovania bude obsahovať značku formulára. Ako vidíme, render obsahuje značku formulára, v ktorej máme menovku na zobrazenie textu, za ktorou nasleduje značka typu vstupu podobná HTML. Tu sme špecifikovali odosielanie udalostí a zmeny udalostí na tlačidle a texte.

Druhy formulárov v reakcii

V zásade existujú dva typy reakcií. Oni sú,

1. Riadený vstup

Reakčná forma sa považuje za kontrolovanú, ak reaktívna zložka, ktorá je zodpovedná za vykreslenie, tiež riadi správanie sa formy pri nasledujúcich vstupoch. To znamená, že vždy, keď hodnoty informujú o zmenách, komponent uloží zmenenú hodnotu do svojho stavu. Pozrime sa na príklad,

kód:

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;

Vo vyššie uvedenom príklade sa vždy, keď sa zmení hodnota používateľského mena, zavolá obsluha udalosti zmien a jej aktualizovaná hodnota sa uloží do stavu. Z tohto dôvodu je možné kontrolovaný formulár použiť na overenie platnosti, vypnutie tlačidla, kým textové pole neobsahuje nejaký text atď.

2. nekontrolované formuláre

Nekontrolované formuláre sú podobné formám HTML. To nevyužíva žiadneho poslucháča. To vyžadovalo získanie hodnoty poľa v požadovanom čase, napríklad po kliknutí na tlačidlo. Požadovaná hodnota sa prečíta pomocou odkazu spojeného s prvkami formulára. Takto je definovaný odkaz,

kód:



„Valueeref“ použité vyššie sa používa na odčítanie hodnoty poľa ako,

this.refs.valueref.value

Z vyššie uvedenej diskusie máme jasné pochopenie kontrolovaných a nekontrolovaných foriem reakcie.

Príklady foriem v reakcii

Nižšie sú uvedené niektoré príklady

Príklad č. 1

Na začatie práce použijeme jednoduché textové pole v našej podobe. Tu je kód zobrazujúci textové pole na zadanie používateľského mena.

kód:

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

Zadajte svoje používateľské meno:

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

Výkon:

Príklad č. 2

Teraz si ukážeme ďalší príklad, ktorý ukazuje, ako sa používa textové pole s tlačidlom odoslania a ako zvládnuť udalosti súvisiace s kliknutím na tlačidlo. Nižšie uvedený kód má,

kód:

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)

Zadajte svoje používateľské meno a kliknite na tlačidlo Odoslať:


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

Výkon:

Po zadaní mena používateľa sa spustí poslucháč a hlavička sa dynamicky zmení.

Po kliknutí na tlačidlo Odoslať sa spustí udalosť odoslania a zobrazí sa upozornenie, ako je to uvedené nižšie,

Príklad č. 3

V tomto príklade uvidíme, ako sa vo formulári používa viac polí. Tu máme dve polia na zadanie krstného mena a priezviska. Na dynamické zmeny obsahu textu so zmenou ich príslušných hodnôt sme použili obslužný program udalostí zmien.

kód:

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)

Zadajte krstné meno:


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

Zadajte priezvisko:

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

Výstup pripojený nižšie zobrazuje dve textové polia na zadanie krstného mena a priezviska. Zmenou obsahu krstného mena a priezviska sa zmení záhlavie uvedené vyššie.

Výkon:

záver

Vo vyššie uvedenej diskusii máme jasné pochopenie foriem reakcie. Okrem vyššie uvedených príkladov môžeme poskytnúť ďalšie úpravy formulárov podľa našich potrieb. Forma je dôležitou reakčnou zložkou a je určená na opakované použitie.

Odporúčané články

Toto je sprievodca Formami v reakcii. Tu diskutujeme o zavedení a druhoch formulárov v reakcii spolu s jeho príkladmi a implementáciou kódu. Viac informácií nájdete aj v nasledujúcich článkoch

  1. Rozdiel medzi ReactJS a Angular2
  2. Top 5 najlepších javascriptových rámcov
  3. Rozhovory s WinForms (základné, rozšírené)
  4. Reagovať natívne verzus reagovať
  5. Sprievodca rôznymi udalosťami JavaScriptu

Kategórie:

Vývoj softvéru