Introduzione alle forme in React

Come sappiamo che i moduli sono una parte importante di un'applicazione Web, pertanto è necessario avere conoscenze sulla progettazione di moduli in reagire. In questo articolo vedremo quali sono i diversi tipi di forme disponibili in reagire, la loro sintassi e alcuni esempi relativi alle forme di reazione.

Ecco una sintassi di base delle forme di reazione,

Sintassi:

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:


);
)
)

La sintassi sopra mostra come viene creato un modulo per reagire. Richiederà la creazione di una classe che estende React. Il componente e il metodo di rendering avranno un tag form al suo interno. Come possiamo vedere, il rendering contiene un tag del modulo all'interno del quale abbiamo un'etichetta per mostrare il testo seguito da un tag del tipo di input simile all'HTML. Qui abbiamo specificato gli eventi di invio e gli eventi di modifica rispettivamente sul pulsante e sul testo.

Tipi di forme in React

Fondamentalmente ci sono due tipi di forme in reagire. Loro sono,

1. Ingresso controllato

Una forma di reazione è considerata controllata quando un componente di reazione responsabile del rendering controlla anche il comportamento della forma su input successivi. Ciò significa che ogni volta che i valori informano le modifiche, il componente salva il valore modificato nel suo stato. Vediamo un esempio,

Codice:

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;

Nell'esempio sopra ogni volta che il valore del nome utente cambia, viene chiamato il gestore eventi change e il suo valore aggiornato viene salvato nello stato. Pertanto è possibile utilizzare un modulo controllato per applicare convalide, disabilitare un pulsante fino a quando un campo di testo contiene del testo, ecc.

2. Moduli non controllati

I moduli non controllati sono simili ai moduli HTML. Questo non fa uso di nessun ascoltatore. Ciò ha richiesto di ottenere il valore del campo nel momento richiesto, ad esempio facendo clic su un pulsante. Il valore richiesto viene letto utilizzando un riferimento associato agli elementi del modulo. Ecco come viene definito il riferimento,

Codice:



"Valueref" usato sopra è usato per leggere il valore del campo come,

this.refs.valueref.value

Dalla discussione di cui sopra, abbiamo una chiara comprensione delle forme controllate e incontrollate per reagire.

Esempi di forme in React

Di seguito sono riportati alcuni esempi

Esempio 1

Per iniziare, useremo un semplice campo di testo nel nostro modulo. Ecco un codice che mostra un campo di testo per inserire un nome utente.

Codice:

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

Per favore inserisci il tuo cognome:


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

Produzione:

Esempio n. 2

Ora tratteremo un altro esempio che mostra come viene utilizzato un campo di testo con un pulsante di invio e come gestire gli eventi relativi al clic di un pulsante. Il codice seguente ha,

Codice:

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)

Inserisci il tuo nome utente e fai clic su Invia:


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

Produzione:

Quando viene inserito il nome utente, verranno attivati ​​i listener e l'intestazione cambierà in modo dinamico.

Dopo aver fatto clic sul pulsante di invio, verrà attivato l'evento di invio e verrà visualizzato un avviso come quello allegato di seguito,

Esempio n. 3

In questo esempio, vedremo come vengono utilizzati più campi in un modulo. Qui abbiamo due campi per inserire firstName e lastName. Abbiamo utilizzato un gestore di eventi change per modificare dinamicamente il contenuto di un testo con una modifica dei rispettivi valori.

Codice:

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)

Inserisci il nome:


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

Inserisci cognome:

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

L'output allegato sotto mostra due campi di testo per inserire il nome e il cognome. Con la modifica del contenuto del nome e del cognome, l'intestazione sopra posizionata viene modificata.

Produzione:

Conclusione

Nella discussione sopra, abbiamo una chiara comprensione delle forme per reagire. Oltre agli esempi sopra, possiamo fornire più personalizzazioni ai moduli secondo le nostre esigenze. Il modulo è un componente di reazione importante ed è pensato per essere riutilizzabile.

Articoli consigliati

Questa è una guida a Forms in React. Qui discutiamo dell'introduzione e dei tipi di moduli in reagire con i suoi esempi e l'implementazione del codice. Puoi anche consultare i seguenti articoli per saperne di più-

  1. Differenza tra ReactJS e Angular2
  2. I 5 migliori framework JavaScript
  3. Domande per l'intervista con WinForms (Basic, Advanced)
  4. React Native vs React
  5. Guida a diversi eventi JavaScript

Categoria:

Sviluppo software