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:
<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:
<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ň:
<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:
import { NewProductForm } from '../parts/products/NewProductForm'
We ony hr tegi bilen
ProductsList komponentiniň arasynda şeýle goşarys:
<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ň:
#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;
}
Talyp programmanyňyzy açyň. Sapakda görkezilişi ýaly formanyňyz üçin wersiýa ýasalyň.
Taýar komponent NewStudentForm-i
baş sahypada StudentsList komponentinden öň goşuň