ფორმის დამატება Redux-ში

წინა გაკვეთილზე ჩვენ გავიგეთ, რომ ფორმის შეყვანის ველებისთვის შეგვიძლია გამოვიყენოთ სტეიტები, რომლებიც მუშაობენ მხოლოდ ერთი კომპონენტის შიგნით, და შევქმენით ცარიელი ფორმა.

მოდით form თეგების შიგნით მოვათავსოთ ვერსტკა ყოველი ველისთვის, სადაც ინფორმაცია შეივსება. პირველი ინფუთი ჩვენში უპასუხებს პროდუქტის სახელს და მისი ვერსტკა ასეთი იქნება:

products/NewProductForm.jsx<form>
  <p>
    <label htmlFor="productName">სახელი:</label>
    <input
      id="productName"
      name="productName"
      value={name}
      onChange={onNameChanged}
    />
  </p>
</form>

მეორე იქნება textarea პროდუქტის აღწერილობისთვის:

products/NewProductForm.jsx<p>
  <label htmlFor="productDesc">აღწერილობა:</label>
  <textarea
    id="productDesc"
    name="productDesc"
    value={desc}
    onChange={onDescChanged}
  />
</p>

თავად დაწერეთ კოდი დარჩენილი ორი ინფუთისთვის ფასისა და რაოდენობისთვის აიდით productPrice და productAmount შესაბამისად.

ყველა ოთხი შეყვანის ველის შემდეგ დამხურავ form თეგამდე დაამატეთ ღილაკი შესანახად:

products/NewProductForm.jsx<button type="button">შენახვა</button>

ჩვენი კომპონენტი ფორმით მზად არის. მოდით ჩვენს მთავარ გვერდზე გამოვსახოთ იგი. ამისთვის გავხსნათ ფაილი root.jsx, იმპორტი გავაკეთოთ მასში კომპონენტის:

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

და ჩავსვათ იგი hr თეგსა და კომპონენტ ProductsList შორის, ასე:

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

გავუშვათ ჩვენი აპლიკაცია და ვიხილოთ ფორმა და პროდუქტების სია. შევიტანოთ კიდევ სტილები 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;
}