Johdanto lomakkeisiin reagoinnissa

Koska tiedämme, että lomakkeet ovat tärkeä osa verkkosovellusta, sen vuoksi on välttämätöntä olla tietoa lomakkeen suunnittelusta reagoitaessa. Tässä artikkelissa nähdään, millaisia ​​reaktiomuodoissa on erityyppisiä muotoja, niiden syntaksi ja muutama esimerkki reagointimuodoista.

Tässä on reaktimuotojen perussintaksi,

Syntaksi:

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:


);
)
)

Yllä oleva syntaksi osoittaa, kuinka muoto luodaan reagoimaan. Se edellyttää luokan luomista, joka laajentaa Reaktia. Komponentissa ja renderöintimenetelmässä on lomaketunniste. Kuten näemme, renderöinti sisältää lomakkeetunnisteen, jossa meillä on tarra tekstin näyttämistä varten, jota seuraa HTML-tyyppinen syöttötyyppitagi. Täällä olemme määrittäneet lähettämistapahtumat ja muutostapahtumat painikkeessa ja tekstissä.

Lomaketyypit reagoida

Periaatteessa reaktiossa on kahden tyyppisiä muotoja. He ovat,

1. Ohjattu tulo

Reagointimuodon katsotaan olevan hallittu, kun renderöinnistä vastaava reaktikomponentti myös kontrolloi muodon käyttäytymistä seuraavissa tuloissa. Tämä tarkoittaa sitä, että aina kun arvot ilmoittavat muutoksista, komponentti tallentaa muutetun arvon tilaansa. Katsokaamme esimerkki,

Koodi:

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;

Yllä olevassa esimerkissä käyttäjänimen joka kerta muuttuessa muutostapahtuman käsittelijä kutsutaan ja sen päivitetty arvo tallennetaan tilaan. Siksi hallittua muotoa voidaan käyttää validointien soveltamiseen, painikkeen poistamiseen käytöstä, kunnes tekstikenttä sisältää tekstiä jne.

2. Hallitsemattomat lomakkeet

Hallitsemattomat muodot ovat samanlaisia ​​kuin HTML-muodot. Tämä ei käytä kuuntelijoita. Tämä vaadittiin kentän arvon saamiseksi haluttuun aikaan esimerkiksi painikkeen napsautuksella. Vaadittava arvo luetaan lomakeelementteihin liittyvällä referenssillä. Näin referenssi määritetään,

Koodi:



Edellä käytettyä "valueref" käytetään kentän arvon lukemiseen kuten,

this.refs.valueref.value

Edellä esitetyn keskustelun perusteella meillä on selkeä käsitys hallituista ja hallitsemattomista reagointimuodoista.

Esimerkkejä Reaktin lomakkeista

Alla on mainittu joitain esimerkkejä

Esimerkki # 1

Asioiden aloittamiseksi käytämme muodollamme yksinkertaista tekstikenttää. Tässä on koodi, joka näyttää tekstikentän käyttäjänimen syöttämistä varten.

Koodi:

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

Anna käyttäjänimesi:

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

lähtö:

Esimerkki 2

Nyt käsittelemme toista esimerkkiä, joka osoittaa, kuinka tekstikenttää käytetään lähetyspainikkeen kanssa ja kuinka käsitellä painikkeen napsautukseen liittyviä tapahtumia. Alla olevassa koodissa on

Koodi:

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)

Anna käyttäjätunnuksesi ja napsauta lähetä:


type = 'text'
OnChange = (this.changeEventHandler)
/>
type = 'Lähetä'
/>
);
)
)
ReactDOM.render (, document.getElementById ('root'));

lähtö:

Kun käyttäjänimi syötetään, kuulijat laukaistaan ​​ja otsikko muuttuu dynaamisesti.

Kun olet napsauttanut lähetä-painiketta, lähetystapahtuma käynnistyy ja hälytys näytetään kuten alla olevassa liitteenä,

Esimerkki 3

Tässä esimerkissä näemme kuinka useita kenttiä käytetään muodossa. Täällä meillä on kaksi kenttää etunimen ja sukunimen syöttämiseen. Olemme käyttäneet muutostapahtumakäsittelijää muuttaaksemme dynaamisesti tekstin sisältöä muuttamalla niiden vastaavia arvoja.

Koodi:

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)

Kirjoita etunimi:


type = 'text'
name = 'etunimi'
OnChange = (this.changeEventHandler)
/>

Kirjoita sukunimi:

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

Alla olevassa liitetiedostossa on kaksi tekstikenttää etunimen ja sukunimen syöttämistä varten. Etunimen ja sukunimen sisällön muuttuessa yllä oleva sijoitettu otsikko muuttuu.

lähtö:

johtopäätös

Yllä olevassa keskustelussa meillä on selkeä käsitys reagointimuodoista. Edellä olevien esimerkien lisäksi voimme tarjota lisää mukautuksia lomakkeisiin tarpeidemme mukaan. Muoto on tärkeä reaktiokomponentti ja sen on tarkoitus olla uudelleenkäytettävä.

Suositellut artikkelit

Tämä on opas lomakkeisiin Reaktissa. Tässä keskustellaan reagoinnin muotojen käyttöönotosta ja tyypeistä sekä sen esimerkeistä ja koodin toteutuksesta. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja-

  1. Ero ReactJS: n ja Angular2: n välillä
  2. 5 suosituinta Javascript-kehystä
  3. WinForms -haastattelukysymykset (Basic, Advanced)
  4. Reagoi alkuperäiset vs. reagoi
  5. Opas erilaisiin JavaScript-tapahtumiin

Luokka:

Ohjelmistokehitys