Добавление формы в Redux
На прошлом уроке мы узнали, что для полей ввода формы можно применить стейты, которые будут работать только внутри одного компонента, и создали пустую форму.
Давайте внутри тегов form разместим верстку
для каждого поля, в которое будет вноситься
информация. Первый инпут у нас будет отвечать
за название продукта и его верстка
будет такой:
<form>
<p>
<label htmlFor="productName">Name:</label>
<input
id="productName"
name="productName"
value={name}
onChange={onNameChanged}
/>
</p>
</form>
Вторым у нас будет textarea для описания
продукта:
<p>
<label htmlFor="productDesc">Description:</label>
<textarea
id="productDesc"
name="productDesc"
value={desc}
onChange={onDescChanged}
/>
</p>
Напишите сами код для двух оставшихся инпутов
для цены и количества с айди productPrice и
productAmount соответственно.
После всех четырех полей ввода перед
закрывающим тегом form добавьте
кнопочку для сохранения:
<button type="button">save</button>
Наш компонент с формой готов. Давайте отобразим
его на главной страничке. Для этого откроем
файл root.jsx, импортируем в него компонент:
import { NewProductForm } from '../parts/products/NewProductForm'
И вставим его между тегом hr и
компонентом ProductsList вот так:
<hr></hr>
<NewProductForm />
<ProductsList />
Запустим наше приложение и полюбуемся
на форму и список продуктов. Внесем
еще стили в 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;
}
Откройте ваше приложение со студентами. Сделайте верстку для вашей формы, как показано в уроке.
Добавьте законченный компонент NewStudentForm
на главную страничку перед StudentsList