Shtimi i një Forme në Redux

Në mësimin e kaluar, mësuam se për fushat e hyrjes së formës mund të përdoren gjendje që do të funksionojnë vetëm brenda një komponenti, dhe krijuam një formë bosh.

Le të vendosim brenda etiketave form hartimin për çdo fushë, ku do të futet informacioni. Inputi i parë do të përgjigjet për emrin e produktit dhe hartimi i tij do të jetë kështu:

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

E dyta do të jetë një textarea për përshkrimin e produktit:

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

Shkruani vetë kodin për dy inputet e mbetura për çmimin dhe sasinë me id productPrice dhe productAmount përkatësisht.

Pas të katër fushave të hyrjes, para etiketës mbyllëse form, shtoni butonin për ruajtje:

products/NewProductForm.jsx<button type="button">ruaj</button>

Komponenti ynë me formë është gati. Le ta shfaqim atë në faqen kryesore. Për këtë, le të hapim fajllin root.jsx, ta importojmë atë në të:

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

Dhe ta fusim atë midis etiketës hr dhe komponentit ProductsList kështu:

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

Le të ekzekutojmë aplikacionin tonë dhe të admirojmë formën dhe listën e produkteve. Le të shtojmë disa stilime 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;
}