Introduksjon til skjemaer i reaksjon

Ettersom vi vet at skjemaer er en viktig del av en webapplikasjon, er det derfor nødvendig å ha kunnskap om formdesign i reaksjon. I denne artikkelen vil vi se hva som er en annen type skjemaer som er tilgjengelige i react, syntaks og noen få eksempler relatert til reaksjonsformer.

Her er en grunnleggende syntaks for reaksjonsformer,

syntaks:

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:


);
)
)

Syntaksen ovenfor viser hvordan et skjema opprettes for å reagere. Det vil kreve å opprette en klasse som utvider React. Komponent- og gjengivelsesmetoden vil ha en formkode i seg. Som vi ser gjengir inneholder skjemaetiketten som vi har en etikett for å vise tekst etterfulgt av koden for inndatatype som ligner på HTML. Her har vi spesifisert sende hendelser og endre hendelser på henholdsvis knapp og tekst.

Typer skjemaer som reageres

I utgangspunktet er det to typer former som reagerer. De er,

1. Kontrollert inngang

En reaksjonsform anses å være kontrollert når en reaksjonskomponent som er ansvarlig for gjengivelse, også kontrollerer formatferden på påfølgende innganger. Det betyr at når verdier informerer om endringer, lagrer komponenten den endrede verdien til sin tilstand. La oss se et eksempel,

Kode:

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;

I eksemplet over hver gang verdien av brukernavn endres, blir endringshendelseshåndtereren kalt og dens oppdaterte verdi lagres i tilstand. Derfor kan kontrollert skjema brukes til å bruke valideringer, deaktivere en knapp til et tekstfelt inneholder tekst, etc.

2. Ukontrollerte skjemaer

Ukontrollerte skjemaer ligner på HTML-skjemaer. Dette gjør ikke bruk av noen lytter. Dette kreves for å få verdien av feltet til ønsket tid, for eksempel ved å klikke på en knapp. Den nødvendige verdien leses ved bruk av en referanse tilknyttet skjemaelementene. Slik defineres referansen,

Kode:



"Valueref" brukt over brukes til å lese verdien av feltet som,

this.refs.valueref.value

Fra diskusjonen ovenfor har vi en klar forståelse av kontrollerte og ukontrollerte former for å reagere.

Eksempler på skjemaer i reaksjon

Nedenfor er nevnt noen eksempler

Eksempel 1

For å starte ting vil vi bruke et enkelt tekstfelt i vår form. Her er en kode som viser et tekstfelt for å oppgi et brukernavn.

Kode:

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

Vennligst tast inn brukernavnet:

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

Produksjon:

Eksempel 2

Nå vil vi dekke et annet eksempel som viser hvordan et tekstfelt brukes med en innsendingsknapp og hvordan du kan håndtere hendelser relatert til klikk på en knapp. Koden nedenfor har,

Kode:

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)

Vennligst skriv inn brukernavnet ditt, og klikk på send:


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

Produksjon:

Når brukernavnet legges inn, blir lytterne utløst og overskriften endres dynamisk.

Etter at du har klikket på knappen Send, vil innsendelseshendelsen bli utløst og et varsel vises som det som er vedlagt nedenfor,

Eksempel 3

I dette eksemplet vil vi se hvordan flere felt brukes i en form. Her har vi to felt for å oppgi fornavn og etternavn. Vi har brukt en endringshändelseshåndterer for å dynamisk endre innholdet i en tekst med en endring i deres respektive verdier.

Kode:

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)

Skriv inn fornavn:


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

Skriv inn etternavn:

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

Den underfølgende utskriften viser to tekstfelt for inntasting av fornavn og etternavn. Med endringen i innholdet i fornavn og etternavn, endres overskriften som er plassert over.

Produksjon:

Konklusjon

I diskusjonen ovenfor har vi en klar forståelse av skjemaer som skal reageres. Bortsett fra eksemplene ovenfor, kan vi tilby flere tilpasninger til skjemaer i henhold til våre behov. Formen er en viktig reaksjonskomponent og er ment å være gjenbrukbar.

Anbefalte artikler

Dette er en guide til Forms in React. Her diskuterer vi introduksjon og typer skjemaer som reagerer sammen med eksempler og implementering av kode. Du kan også se på følgende artikler for å lære mer-

  1. Forskjellen mellom ReactJS og Angular2
  2. Topp 5 beste Javascript-rammer
  3. WinForms intervjuspørsmål (grunnleggende, avansert)
  4. React Native vs React
  5. Veiledning for forskjellige JavaScript-hendelser

Kategori:

Programvare utvikling