Добавление формы в Redux

На прошлом уроке мы узнали, что для полей ввода формы можно применить стейты, которые будут работать только внутри одного компонента, и создали пустую форму.

Давайте внутри тегов form разместим верстку для каждого поля, в которое будет вноситься информация. Первый инпут у нас будет отвечать за название продукта и его верстка будет такой:

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

Вторым у нас будет textarea для описания продукта:

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

Напишите сами код для двух оставшихся инпутов для цены и количества с айди productPrice и productAmount соответственно.

После всех четырех полей ввода перед закрывающим тегом form добавьте кнопочку для сохранения:

products/NewProductForm.jsx<button type="button">save</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;
}