Adăugarea unui formular în Redux

În lecția anterioară am aflat că pentru câmpurile de introducere ale formularului putem aplica stări care vor funcționa doar în interiorul unei singure componente, și am creat un formular gol.

Să plasăm în interiorul tagurilor form markup-ul pentru fiecare câmp, în care va fi introdusă informația. Primul input va fi responsabil pentru numele produsului și markup-ul său va arăta astfel:

products/NewProductForm.jsx<form>
  <p>
    <label htmlFor="productName">Nume:</label>
    <input
      id="productName"
      name="productName"
      value={name}
      onChange={onNameChanged}
    />
  </p>
</form>

Al doilea va fi textarea pentru descrierea produsului:

products/NewProductForm.jsx<p>
  <label htmlFor="productDesc">Descriere:</label>
  <textarea
    id="productDesc"
    name="productDesc"
    value={desc}
    onChange={onDescChanged}
  />
</p>

Scrieți singuri codul pentru cele două input-uri rămase pentru preț și cantitate cu id-urile productPrice și productAmount respectiv.

După toate cele patru câmpuri de introducere, înainte de tag-ul de închidere form adăugați un buton pentru salvare:

products/NewProductForm.jsx<button type="button">salvează</button>

Componenta noastră cu formular este gata. Să o afișăm pe pagina principală. Pentru aceasta deschidem fișierul root.jsx, importăm în el componenta:

app/root.jsximport { NewProductForm } from '../parts/products/NewProductForm'

Și o inserăm între tag-ul hr și componenta ProductsList astfel:

app/root.jsx<hr></hr>
<NewProductForm />
<ProductsList />

Să pornim aplicația noastră și să ne minunăm de formular și lista de produse. Să adăugăm și stiluri în index.css:

index.css#main-page {
  max-width: 600px;
}

select,
textarea,
input,
button {
  font-size: 18px;
}

form {
  margin-bottom: 20px;
  border-bottom: 2px solid lightgray;
  padding-bottom: 10px;
}

form p {
  margin: 5px;
}