Формаро ба 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>

Барои ду инпути боқимонда барои нарх ва миқдор бо ID-ҳои 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;
}