Menambah Borang ke Redux

Dalam pelajaran lepas, kita belajar bahawa untuk medan input borang, kita boleh menggunakan keadaan (state) yang hanya berfungsi dalam satu komponen, dan kami telah mencipta borang kosong.

Mari letakkan markup untuk setiap medan yang akan dimasukkan maklumat di dalam tag form. Input pertama kami akan bertanggungjawab untuk nama produk dan markupnya adalah seperti berikut:

<form>
	<p>
		<label htmlFor="productName">Nama:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

Kami akan mempunyai textarea untuk penerangan produk sebagai yang kedua:

<p>
	<label htmlFor="productDesc">Penerangan:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Tulis sendiri kod untuk dua input yang tinggal untuk harga dan kuantiti dengan id productPrice dan productAmount masing-masing.

Selepas semua empat medan input, sebelum tag penutup form, tambahkan tompok simpan:

<button type="button">simpan</button>

Komponen borang kami sudah siap. Mari paparkan ia pada halaman utama. Untuk melakukan ini, buka fail root.jsx, import komponen ke dalamnya:

import { NewProductForm } from '../parts/products/NewProductForm'

Dan masukkan di antara tag hr dan komponen ProductsList seperti ini:

<hr></hr>
<NewProductForm />
<ProductsList />

Mari lancarkan aplikasi kami dan kagum dengan borang dan senarai produk. Mari tambah beberapa gaya dalam 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;
}

Buka aplikasi pelajar anda. Buat markup untuk borang anda, seperti yang ditunjukkan dalam pelajaran.

Tambah komponen siap NewStudentForm ke halaman utama sebelum StudentsList