Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Comprendere Forms ed Eventi in React

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

In questo tutorial, imparerete forms ed eventi in React. Inizieremo creando una semplice applicazione React e aggiungeremo un form e alcuni elementi. Poi vedremo come aggiungere eventi agli elementi del form.

Se avete appena iniziato a usare React, vi consigliamo di leggere il tutorial introduttivo.

Introduzione

Iniziamo impostando la nostra applicazione React. Create una cartella di progetto denominata ReactFormApp. Dentro ReactFormApp create un file chiamato index.html e aggiungete il seguente codice HTML:

Inizializzate il progetto usando Node Package Manager (npm).

Inserite i dettagli richiesti e dovreste avere il file package.json dentro la cartella ReactFormApp.

Installate le dipendenze react e react-dom usando npm.

Installate il package babel richiesto usando npm e salvatelo nel file package.json.

I packages babel sono richiesti per trasformare il codice JSX in JavaScript.

Create un file di configurazione webpack per gestire le configurazioni webpack. Create un file chiamato webpack.config.js e aggiungete le seguenti configurazioni:

app.js è il file in cui risiederà il nostro codice React. Create un file chiamato app.js dentro la cartella ReactFormApp. Importate le librerie react richieste in app.js. Create un componente denominato App avente un div con del testo. Eseguite il rendering del componente usando il metodo render. Ecco come apparirà il file app.js:

Salvate le modifiche e riavviate il server di sviluppo webpack.

Una volta che il server è stato riavviato, dovreste essere in grado di vedere l'applicazione React all'indirizzo http://localhost:8080/.

React Form App Display Screen

Create un Form React

Abbiamo una semplice applicazione React impostata e funzionante. Andiamo al passaggio successivo e proviamo a creare un componente form usando codice JSX in app.js.

Create un componente chiamato FormComp all'interno di app.js.

All'interno della funzione render per FormComp definiremo il codice HTML per creare un form. Inseriremo un paio di labels, boxes di input e un pulsante da cliccare. Ecco come apparirà:

Eseguite il rendering del componente form FormComp per visualizzare il form all'interno di index.html.

Salvate le modifiche, riavviate il server webpack e dovreste ora vedere il form.

React App Form Tutorial

Aggiungere Eventi al Form

Il nostro form React è in buona forma. Per farlo interagire dobbiamo aggiungere eventi al form.

Cominceremo aggiungendo variabili di stato su ognuno dei boxes di input così che potremo leggerne i valori. Impostiamo le variabili di stato per i box di inserimento testo nome e cognome.

Siate sicuri di impostare lo stato iniziale per le variabili soprastanti. Definite la funzione getInitialState dentro il componente FormComp e inizializzate entrambe le variabili.

Abbiamo bisogno di gestire l'evento on-change dei boxes di input e assegnare le variabili di stato quando il valore nei boxes di testo cambia. Definite quindi un evento onChange nei boxes di input.

Definite le funzioni onChange dentro FormComp e impostate le variabili di stato.

Proviamo a eseguire il rendering delle variabili di stato, usandole. Dentro l'HTML di FormComp aggiungete il seguente elemento che esegue il rendering delle variabili di stato.

Salvate le modifiche e riavviate il server webpack. Cercate di inserire del testo dentro i boxes nome e cognome, e dovreste vedere i risultati mentre digitate.

React Form App Form Fill

Successivamente, aggiungiamo un evento on-click al pulsante submit che troviamo nel nostro form.

Definiamo la funzione handleClick dentro il componente FormComp. Cliccando sul pulsante submit concateneremo sia nome che cognome e visualizzeremo il nome completo nel form. Di seguito la funzione handleClick:

Inoltre, inizializziamo la variabile Name nella funzione getInitialState.

Visualizziamo il nome completo concatenato nel form HTML.

Ecco come apparirà il componente finale FormComp:

Salvate i cambiamenti soprastanti e riavviate il server di sviluppo. Inserite entrambi i nomi e cliccate sul pulsante submit, dovrebbe essere visualizzato il nome completo.

Riassumendo

In questo tutorial avete imparato come iniziare a realizzare applicazioni React e a capire i concetti base sul gestire forms ed eventi in un'applicazione web React. Spero che questo tutorial sia stato utile per introdurvi alla realizzazione di applicazioni basate su React.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Fateci sapere le vostre considerazioni, suggerimenti o qualsiasi correzione nei commenti sottostanti. Continuate a controllare questo spazio per ulteriori tutorials React.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.