Formun Redux'a Eklenmesi

Önceki derste, form girdi alanları için sadece bir bileşen içinde çalışacak state'ler kullanılabileceğini öğrendik ve boş bir form oluşturduk.

Şimdi form etiketleri içine, bilgi girilecek her alan için HTML yerleşimini koyalım. İlk input ürün adından sorumlu olacak ve HTML'i şöyle olacak:

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

İkinci olarak ürün açıklaması için bir textarea olacak:

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

Sırasıyla productPrice ve productAmount id'lerine sahip olacak fiyat ve miktar için kalan iki input'un kodunu kendiniz yazın.

Dört girdi alanından sonra, kapanış form etiketinden önce kaydetme butonu ekleyin:

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

Form bileşenimiz hazır. Şimdi onu ana sayfada gösterelim. Bunun için root.jsx dosyasını açıp, bileşeni içe aktaralım:

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

Ve onu hr etiketi ile ProductsList bileşeni arasına şu şekilde yerleştirin:

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

Uygulamamızı çalıştıralım ve form ile ürün listesine bir göz atalım. index.css dosyasına biraz stil ekleyelim:

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;
}