CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 19 / 41

Gestione dell’interfaccia: metodo imperativo

L’approccio imperativo prevede l’analisi di quali step vanno fatti. La documentazione ufficiale di React propone questa metafora: immaginiamo di essere passeggeri di un auto e, senza dire a chi guida dove vogliamo andare, diamo indicazioni sulle svolte da fare, una alla volta. Chi guida non sa dove stiamo andando e le nostre probabilità di successo sono basate sul fatto che daremo tutte le indicazioni giuste al momento giusto.

 

Prendiamo ad esempio la gestione dell’interfaccia di un form, il perfetto esempio di come passare da un approccio imperativo a uno dichiarativo

Ecco cosa vogliamo ottenere:

  • Quando viene premuto il pulsante “Create”, il bottone, l’input di testo e la checkbox si disabilitano.
  • Quando la richiesta ha successo, il bottone, l’input di testo e la checkbox si abilitano.
  • Quando la richiesta va in errore, il bottone, l’input di testo e la checkbox si abilitano. L’errore viene visualizzato. 
import { useState } from "react";
import "./TodoItemForm.css";

export default function TodoItemForm({ todoItem, onChange, onSubmit }) {
  const [error, setError] = useState(null);
  const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] = useState(false);
  const [isDescriptionInputDisabled, setIsDescriptionInputDisabled] =
    useState(false);
  const [isCheckboxDisabled, setIsCheckboxDisabled] = useState(false);

  // ...

  const onFormSubmit = (event) => {
    event.preventDefault();

    setError(null);
    setIsSubmitButtonDisabled(true);
    setIsDescriptionInputDisabled(true);
    setIsCheckboxDisabled(true);

    onSubmit().then(
      (_todoItem) => {
        setIsSubmitButtonDisabled(false);
        setIsDescriptionInputDisabled(false);
        setIsCheckboxDisabled(false);
      },
      (error) => {
        setError(error.message);
        setIsSubmitButtonDisabled(false);
        setIsDescriptionInputDisabled(false);
        setIsCheckboxDisabled(false);
      }
    );
  };

  return (
    <form className="TodoItemForm" onSubmit={onFormSubmit}>
      <input
        type="checkbox"
        checked={todoItem.isDone}
        onChange={(event) => {
          onIsDoneChange(event.currentTarget.checked);
        }}
        disabled={isCheckboxDisabled}
      />
      <input
        type="text"
        placeholder="Description"
        value={todoItem.description}
        onInput={(event) => {
          onDescriptionChange(event.currentTarget.value);
        }}
        disabled={isDescriptionInputDisabled}
      />
      <input type="submit" value="Create" disabled={isSubmitButtonDisabled} />
      {error ? <p style={{ color: "red" }}>{error}</p> : null}
    </form>
  );
}

Abbiamo creato quattro stati: uno per l’errore ed uno per ogni elemento che vogliamo venga disabilitato durante il salvataggio dei dati.

Nota: potresti aver notato l’uso di un trattino basso per _todoItem nel metodo then della Promise. Si tratta di una convenzione per indicare argomenti di funzioni che scegliamo deliberatamente di non utilizzare, ma che vogliamo dichiarare, di solito perché ci serve un argomento successivo (per esempio il secondo argomento) oppure, come in questo caso, perché non vogliamo rischiare di dimenticarci che a quella funzione viene passato un argomento!!

Se stai pensando qualcosa come “non avrebbe avuto più senso usare un solo stato, per esempio isLoading, che indichi che la richiesta è in fase di caricamento?”, allora stai già pensando in modo dichiarativo. È difficile fare esempi di programmazione imperativa in React, perché la libreria stessa spinge a un approccio dichiarativo, ma pensiamo a come una cosa del genere potrebbe essere implementata in linguaggio JavaScript:

 

e.preventDefault();

hide(errorMessage);
disable(checkbox);
disable(descriptionInput);
disable(submitButton);

submit().then(
  () => {
    enable(checkbox);
    enable(descriptionInput);
    enable(submitButton);
  },
  () => {
    show(errorMessage);
    enable(checkbox);
    enable(descriptionInput);
    enable(submitButton);
  }
);

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.