Увод у форме у реагирању

Као што знамо да су обрасци важан део веб апликације, стога је неопходно имати знање о дизајнирању образаца у реакцији. У овом чланку ћемо видети који су различити типови облика доступних у реакцији, њихову синтаксу и неколико примера који се односе на облике реакције.

Овде је основна синтакса реактивних облика,

Синтакса:

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:


);
)
)

Горња синтакса показује како је створен облик за реакцију. Захтеваће креирање класе која проширује Реацт. Метода компоненте и рендера ће имати ознаку обрасца у себи. Као што можемо видети рендер садржи ознаку обрасца унутар које имамо ознаку за приказивање текста, а затим ознаку типа уноса сличну ХТМЛ-у. Овде смо одредили подношење догађаја и промене догађаја на тастеру и тексту.

Врсте облика у Реацт

У основи постоје две врсте облика у реакцији. Су,

1. Контролирани унос

Сматра се да је реактивни облик контролисан када реакциона компонента која је одговорна за приказивање такође контролира понашање форме на наредним уносима. То значи да када вредности информишу промене, компонента спрема промењену вредност у њено стање. Да видимо пример,

Шифра:

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;

У горњем примјеру сваки пут када се промијени вриједност корисничког имена, позива се обрађивач догађаја промјене и његова ажурирана вриједност се чува у стању. Због тога се контролисани образац може користити за примену валидација, деактивирање дугмета све док текстуално поље не садржи неки текст итд.

2. Неконтролисани обрасци

Неконтролисани облици су слични ХТМЛ обрасцима. Ово не користи ниједан слушалац. Ово је потребно да би се добила вредност поља у тражено време, на пример, на клик дугмета. Потребна вриједност се очитава помоћу референце која је повезана с елементима форме. Овако је дефинисана референца,

Шифра:



„Валуереф“ који се користи горе користи се за читање вредности поља попут,

this.refs.valueref.value

Из горње дискусије имамо јасно разумевање контролисаних и неконтролисаних облика за реаговање.

Примери образаца у Реацт

Испод су наведени неки примери

Пример # 1

За почетак ствари користићемо једноставно текстно поље у нашем облику. Овде је код који приказује текстуално поље за унос корисничког имена.

Шифра:

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

Унесите своје корисничко име:

типе = "текст"
/>
);
)
)
РеацтДОМ.рендер (, доцумент.гетЕлементБиИд ('роот'));

Излаз:

Пример бр. 2

Сада ћемо покрити још један пример који приказује како се користи текстуално поље помоћу дугмета за слање и како се поступају са догађајима који се односе на клик гумба. Следећи код је,

Шифра:

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)

Молимо унесите своје корисничко име и кликните пријаву:


типе = 'тект'
онЦханге = (тхис.цхангеЕвентХандлер)
/>
типе = 'субмит'
/>
);
)
)
РеацтДОМ.рендер (, доцумент.гетЕлементБиИд ('роот'));

Излаз:

Када се унесе корисничко име, слушаоци ће се покренути и заглавље ће се динамично мењати.

Након клика на дугме за слање, активира се догађај и биће приказано упозорење попут оног у прилогу испод,

Пример бр. 3

У овом примеру ћемо видети како се у неком облику користи више поља. Овде имамо два поља за унос фирстНаме и ластНаме. Користили смо обрађивач догађаја промене да бисмо динамички променили садржај текста са променом њихових вредности.

Шифра:

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)

Унесите име:


типе = 'тект'
наме = 'прво име'
онЦханге = (тхис.цхангеЕвентХандлер)
/>

Унесите презиме:

типе = 'тект'
наме = 'ластНаме'
онЦханге = (тхис.цхангеЕвентХандлер)
/>
);
)
)
РеацтДОМ.рендер (, доцумент.гетЕлементБиИд ('роот'));

Доњи приложени излаз приказује два текстуална поља за унос имена и презимена. Са променом садржаја имена и презимена, мења се горе постављено заглавље.

Излаз:

Закључак

У горњој дискусији имамо јасно разумевање облика за реаговање. Осим горе наведених примјера, можемо пружити и више прилагодби образаца према нашим потребама. Облик је важна компонента реакције и треба га користити за вишекратну употребу.

Препоручени чланци

Ово је водич за Обрасце у Реацт-у. Овде смо расправљали о увођењу и врстама образаца у реакцији, заједно са његовим примерима и применом кода. Такође можете погледати следеће чланке да бисте сазнали више -

  1. Разлика између РеацтЈС и Ангулар2
  2. Топ 5 најбољих оквира ЈаваСцрипта
  3. ВинФормс Интервју Питања (основна, напредна)
  4. Реацт Нативе вс Реацт
  5. Водич за различите ЈаваСцрипт догађаје

Категорија:

Развој софтвера