Úvod do formulářů v reakci

Protože víme, že formuláře jsou důležitou součástí webové aplikace, je nutné mít znalosti o návrhu formulářů v reakci. V tomto článku uvidíme, jaké jsou různé typy forem dostupných v reakcích, jejich syntaxi a několik příkladů souvisejících s reakčními formami.

Zde je základní syntax reakčních forem,

Syntax:

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:


);
)
)

Výše uvedená syntaxe ukazuje, jak je formulář vytvořen, aby reagoval. Bude vyžadovat vytvoření třídy rozšiřující React. Metoda komponenty a vykreslení bude obsahovat značku formuláře. Jak vidíme, render obsahuje tag formuláře, ve kterém máme štítek pro zobrazení textu následovaný značkou typu vstupu podobnou HTML. Zde jsme zadali události odeslání a události změn na tlačítku a textu.

Druhy formulářů v reakci

V zásadě existují dva typy reakcí. Oni jsou,

1. Řízený vstup

Reakční forma je považována za kontrolovanou, když reakční komponenta, která je zodpovědná za vykreslování, také řídí chování formuláře na následných vstupech. To znamená, že kdykoli hodnoty informují o změnách, komponenta uloží změněnou hodnotu do svého stavu. Podívejme se na pří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;

Ve výše uvedeném příkladu se při každé změně hodnoty uživatelského jména vyvolá obsluha události změn a její aktualizovaná hodnota se uloží do stavu. Řízený formulář lze proto použít pro použití ověření, deaktivace tlačítka, dokud textové pole neobsahuje nějaký text atd.

2. Nekontrolované formuláře

Nekontrolované formuláře jsou podobné formám HTML. To nevyužívá žádného posluchače. To vyžadovalo získání hodnoty pole v požadovaném čase, například po kliknutí na tlačítko. Požadovaná hodnota je čtena pomocí odkazu přiřazeného k prvkům formuláře. Takto je definován odkaz,

Kód:



„Valueeref“ použité výše se používá ke čtení hodnoty pole jako,

this.refs.valueref.value

Z výše uvedené diskuse máme jasné porozumění kontrolovaným a nekontrolovaným formám reakce.

Příklady formulářů v reakci

Níže jsou uvedeny některé příklady

Příklad č. 1

K zahájení věcí použijeme jednoduché textové pole v naší podobě. Zde je kód zobrazující textové pole pro zadání uživatelského jména.

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

Zadejte své uživatelské jméno:

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

Výstup:

Příklad č. 2

Nyní si ukážeme další příklad ukazující, jak se textové pole používá s tlačítkem Odeslat a jak zpracovat události související s kliknutím na tlačítko. Níže 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)

Zadejte své uživatelské jméno a klikněte na Odeslat:


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

Výstup:

Po zadání uživatelského jména se spustí posluchač a záhlaví se dynamicky změní.

Po kliknutí na tlačítko Odeslat se spustí událost odeslání a zobrazí se upozornění, jako je uvedeno níže,

Příklad č. 3

V tomto příkladu uvidíme, jak se ve formuláři používá více polí. Zde máme dvě pole pro zadání křestního jména a příjmení. Použili jsme obslužný program události změn, abychom dynamicky změnili obsah textu se změnou jejich příslušných hodnot.

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)

Zadejte křestní jméno:


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

Zadejte příjmení:

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

Níže uvedený výstup zobrazuje dvě textová pole pro zadání křestního jména a příjmení. Se změnou obsahu křestního jména a příjmení se výše uvedená záhlaví změní.

Výstup:

Závěr

Ve výše uvedené diskusi máme jasné pochopení forem reakce. Kromě výše uvedených příkladů můžeme poskytnout více přizpůsobení formulářům podle našich potřeb. Forma je důležitou reakční složkou a má být znovu použitelná.

Doporučené články

Toto je průvodce Forms in React. Zde diskutujeme úvod a typy forem v reakci spolu s jeho příklady a implementací kódu. Další informace naleznete také v následujících článcích

  1. Rozdíl mezi ReactJS a Angular2
  2. Top 5 nejlepších Javascript Frameworků
  3. Rozhovory s WinForms (základní, pokročilé)
  4. Reagovat Nativní vs. Reagovat
  5. Průvodce různými událostmi JavaScriptu

Kategorie:

Vývoj softwaru