Formas pievienošana Redux

Iepriekšējā nodarbībā mēs uzzinājām, ka ievades laukiem formā var izmantot stāvokļus, kas darbosies tikai viena komponenta ietvaros, un izveidojām tukšu formu.

Ievietosim form tagos izkārtojumu katram laukam, kurā tiks ievadīta informācija. Pirmā ievade atbildēs par produkta nosaukumu un tā izkārtojums būs šāds:

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

Otrā būs textarea produkta aprakstam:

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

Paši uzrakstiet kodu divām atlikušajām ievadēm cenai un daudzumam ar ID productPrice un productAmount attiecīgi.

Pēc visiem četriem ievades laukiem pirms aizverošā form tagā pievienojiet pogu saglabāšanai:

products/NewProductForm.jsx<button type="button">saglabāt</button>

Mūsu komponents ar formu ir gatavs. Parādīsim to galvenajā lapā. Lai to izdarītu, atveram failu root.jsx, importējam tajā komponentu:

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

Un ievietosim to starp hr tagu un komponentu ProductsList šādi:

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

Palaidīsim mūsu lietotni un apbrīnosim formu un produktu sarakstu. Pievienosim vēl stilus 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;
}