Introduktion till formulär i reaktion

Eftersom vi vet att formulär är en viktig del av en webbapplikation är det därför nödvändigt att ha kunskap om formdesign i reaktion. I den här artikeln kommer vi att se vad som är en annan typ av formulär tillgängliga som reagera, deras syntax och några exempel relaterade till reaktionsformer.

Här är en grundläggande syntax av reaktionsformer,

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:


);
)
)

Ovanstående syntax visar hur en form skapas för att reagera. Det kommer att kräva att du skapar en klass som utvidgar React. Komponent- och renderingsmetoden kommer att ha en formtagg i den. Som vi kan se återges innehåller formuläretikett inom vilket vi har en etikett för att visa text följt av ingångstyps-taggen som liknar HTML. Här har vi specificerat skicka händelser och ändra händelser på respektive knapp respektive text.

Typer av formulär i reaktion

I grund och botten finns det två typer av former som reagerar. Dom är,

1. Kontrollerad ingång

En reaktionsform anses vara kontrollerad när en reaktionskomponent som ansvarar för återgivning också styr formbeteendet på efterföljande ingångar. Det betyder att när värden informerar om förändringar sparar komponenten det ändrade värdet till dess tillstånd. Låt oss se ett exempel,

Koda:

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 exemplet ovan varje gång värdet för användarnamn ändras, anropas händelseshanteraren och dess uppdaterade värde sparas till status. Därför kan kontrollerad form användas för att tillämpa valideringar, inaktivera en knapp tills ett textfält innehåller text, etc.

2. Okontrollerade formulär

Okontrollerade formulär liknar HTML-formulär. Detta använder inte någon lyssnare. Detta krävs för att få värdet på fältet vid önskad tid, till exempel genom att klicka på en knapp. Det erforderliga värdet läses med en referens associerad med formelementen. Så här definieras referensen,

Koda:



"Valueref" som används ovan används för att läsa värdet på fältet,

this.refs.valueref.value

Från ovanstående diskussion har vi en klar förståelse för kontrollerade och okontrollerade former att reagera.

Exempel på formulär i reaktion

Nedan nämns några exempel

Exempel 1

För att starta saker kommer vi att använda ett enkelt textfält i vår form. Här är en kod som visar ett textfält för att ange ett användarnamn.

Koda:

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änligen ange ditt användarnamn:

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

Produktion:

Exempel 2

Nu kommer vi att täcka ytterligare ett exempel som visar hur ett textfält används med en skicka-knapp och hur man hanterar händelser relaterade till klick på en knapp. Nedanstående kod har,

Koda:

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)

Ange ditt användarnamn och klicka på skicka:


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

Produktion:

När användarnamnet matas in utlöses lyssnarna och rubriken kommer att ändras dynamiskt.

Efter att du har klickat på skicka-knappen kommer aktiveringshändelsen att utlösas och en varning visas som den som bifogas nedan,

Exempel 3

I det här exemplet ser vi hur flera fält används i en form. Här har vi två fält för att ange förnamn och efternamn. Vi har använt en händelsehanterare för att dynamiskt ändra innehållet i en text med en förändring i deras respektive värden.

Koda:

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)

Ange förnamn:


typ = 'text'
name = 'firstname'
onChange = (this.changeEventHandler)
/>

Ange efternamn:

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

Nedanstående bifogade utgång visar två textfält för att ange förnamn och efternamn. Med förändringen i innehållet i förnamnet och efternamnet ändras ovannämnda rubrik.

Produktion:

Slutsats

I ovanstående diskussion har vi en tydlig förståelse för former som ska reagera. Bortsett från ovanstående exempel kan vi tillhandahålla fler anpassningar för formulär enligt våra behov. Formen är en viktig reaktionskomponent och är tänkt att vara återanvändbar.

Rekommenderade artiklar

Detta är en guide till Forms in React. Här diskuterar vi introduktionen och typerna av formulär som reagerar tillsammans med dess exempel och kodimplementering. Du kan också titta på följande artiklar för att lära dig mer-

  1. Skillnaden mellan ReactJS och Angular2
  2. Topp 5 bästa Javascript-ramverk
  3. WinForms intervjufrågor (grundläggande, avancerad)
  4. React Native vs React
  5. Guide till olika JavaScript-händelser

Kategori:

Mjukvaruutveckling