Introduction aux formulaires dans React

Comme nous savons que les formulaires sont une partie importante d'une application Web, il est donc nécessaire d'avoir des connaissances sur la conception de formulaires dans React. Dans cet article, nous verrons quels sont les différents types de formulaires disponibles dans react, leur syntaxe et quelques exemples liés aux formulaires react.

Voici une syntaxe de base des formes réactives,

Syntaxe:

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 syntaxe ci-dessus montre comment un formulaire est créé pour réagir. Il faudra créer une classe étendant React. Le composant et la méthode de rendu comporteront une balise de formulaire. Comme nous pouvons le voir, render contient une balise de formulaire dans laquelle nous avons une étiquette pour afficher le texte suivie d'une balise de type d'entrée similaire à HTML. Ici, nous avons spécifié respectivement soumettre des événements et modifier les événements sur le bouton et le texte.

Types de formulaires dans React

Fondamentalement, il existe deux types de formes en réaction. Elles sont,

1. Entrée contrôlée

Une forme de réaction est considérée comme contrôlée lorsqu'un composant de réaction responsable du rendu contrôle également le comportement de la forme sur les entrées suivantes. Cela signifie que chaque fois que les valeurs informent des changements, le composant enregistre la valeur modifiée dans son état. Voyons un exemple,

Code:

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;

Dans l'exemple ci-dessus, chaque fois que la valeur du nom d'utilisateur change, le gestionnaire d'événements change est appelé et sa valeur mise à jour est enregistrée dans l'état. Par conséquent, un formulaire contrôlé peut être utilisé pour appliquer des validations, désactiver un bouton jusqu'à ce qu'un champ de texte contienne du texte, etc.

2. Formulaires non contrôlés

Les formulaires non contrôlés sont similaires aux formulaires HTML. Cela n'utilise aucun écouteur. Cela exigeait d'obtenir la valeur du champ au moment requis, par exemple en cliquant sur un bouton. La valeur requise est lue à l'aide d'une référence associée aux éléments du formulaire. C'est ainsi que la référence est définie,

Code:



"Valueref" utilisé ci-dessus est utilisé pour lire la valeur du champ comme,

this.refs.valueref.value

De la discussion ci-dessus, nous avons une compréhension claire des formes contrôlées et non contrôlées pour réagir.

Exemples de formulaires dans React

Ci-dessous sont mentionnés quelques exemples

Exemple 1

Pour commencer, nous utiliserons un simple champ de texte dans notre formulaire. Voici un code affichant un champ de texte pour saisir un nom d'utilisateur.

Code:

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

S'il vous plaît entrez votre nom d'utilisateur:

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

Production:

Exemple # 2

Nous allons maintenant couvrir un autre exemple montrant comment un champ de texte est utilisé avec un bouton d'envoi et comment gérer les événements liés au clic sur un bouton. Le code ci-dessous a,

Code:

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)

Veuillez entrer votre nom d'utilisateur et cliquez sur soumettre:


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

Production:

Lorsque le nom d'utilisateur est entré, les écouteurs seront déclenchés et l'en-tête changera dynamiquement.

Après avoir cliqué sur le bouton soumettre, l'événement de soumission sera déclenché et une alerte sera affichée comme celle ci-dessous,

Exemple # 3

Dans cet exemple, nous verrons comment plusieurs champs sont utilisés dans un formulaire. Ici, nous avons deux champs pour saisir firstName et lastName. Nous avons utilisé un gestionnaire d'événement de changement afin de changer dynamiquement le contenu d'un texte avec un changement de leurs valeurs respectives.

Code:

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)

Entrez votre prénom:


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

Entrer le nom de famille:

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

La sortie ci-dessous montre deux champs de texte pour entrer le prénom et le nom. Avec la modification du contenu du prénom et du nom, l'en-tête placé ci-dessus est modifié.

Production:

Conclusion

Dans la discussion ci-dessus, nous avons une compréhension claire des formes de réaction. Hormis les exemples ci-dessus, nous pouvons fournir plus de personnalisations aux formulaires selon nos besoins. La forme est un composant réactif important et est destinée à être réutilisable.

Articles recommandés

Ceci est un guide des formulaires dans React. Nous discutons ici de l'introduction et des types de formulaires en réaction ainsi que de ses exemples et de l'implémentation du code. Vous pouvez également consulter les articles suivants pour en savoir plus-

  1. Différence entre ReactJS et Angular2
  2. Top 5 des meilleurs cadres Javascript
  3. Questions d'entretiens chez WinForms (Basique, Avancé)
  4. React Native vs React
  5. Guide des différents événements JavaScript

Catégorie:

Développement de logiciels