Redux-a forma goşmak

Öňki sapakda biz formanyň girizilýän meýdanlary üçin diňe bir komponent içinde işleýän steýtleri ulanmak bolýandygyny öwrendik we boş forma döretdik.

Geliň form tegleriniň içinde her bir maglumat girizilýän meýdan üçin wersiýa ýerleşdireli. Birinji input bizim önümiň adyna jogap berer we onuň wersiýasy şeýle bolar:

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

Ikinjisi bizde önümiň düşündirişi üçin textarea bolar:

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

Özüňiz bahasy we mukdary üçin galan iki input üçin kody ýazyň, degişlilikde productPrice we productAmount ID-leri bilen.

Dört girizilýän meýdandan soň ýapyjy form teginden öň saklamak üçin knopka goşuň:

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

Formasy bilen komponentimiz taýar. Geliň ony baş sahypada görkezeliň. Munuň üçin root.jsx faýlyny açarys, ona komponenti import ederis:

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

We ony hr tegi bilen ProductsList komponentiniň arasynda şeýle goşarys:

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

Programmany işledeliň we forma we önümleriň sanawyna göz aýlanyş edeliň. index.css faýlyna ýene-de stilleri goşalyň:

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