Borang dan Negeri Tempatan dalam Redux

Dalam pelajaran lepas, kita telah belajar untuk mendapatkan data dari store dan memaparkannya dalam komponen React. Dalam pelajaran ini, kita akan mula menambah data baru. Kita akan melakukannya menggunakan borang, yang setelah diisi, penjual boleh menambah produk baru.

Mari kita mulakan dengan hakikat bahawa tidak selalu masuk akal untuk menggunakan negeri global Redux. Ada kalanya, untuk keperluan kita, kita boleh mencipta negeri temptan. Kita akan memanggil negeri tempatan sebagai negeri yang digunakan di dalam komponen tertentu untuk keperluan teknikal. Sebagai contoh, untuk menyembunyikan atau menunjukkan sesuatu dengan butang.

Dalam kes kami, pengguna akan memasukkan data ke dalam borang dan, sememangnya, kita akan memerlukan negeri untuk ini. Kita boleh menggunakan negeri global Redux, tetapi ini tidak perlu, kerana negeri kita hanya akan berfungsi di satu tempat aplikasi untuk borang penambahan produk. Peraturan utama yang perlu diikuti - negeri tempatan tidak boleh berfungsi di luar komponen di mana ia dicipta, dan dalam apa jua keadaan tidak boleh menyentuh store. Amalan sedemikian sering digunakan semasa mencipta borang.

Mari buka folder products bagi aplikasi produk kami, buat fail NewProductForm.jsx di dalamnya dan import hook useState:

import { useState } from 'react'

Sekarang mari kita cipta komponen borang itu sendiri dan tulis di dalamnya negeri biasa, seperti yang kita lakukan sebelum ini dalam React. Kita perlukan negeri untuk bekerja dengan nama, keterangan, harga dan kuantiti produk:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Seterusnya, tambahkan pemprosesan standard untuk setiap medan apabila pengguna memasukkan data:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

Dan kemudian kembalikan dalam komponen markup dengan tajuk dan borang kosong:

return (
	<div>
		<h2>Tambah Produk Baru</h2>
		<form>
		</form>
	</div>
)

Buka aplikasi pelajar anda. Buat fail NewStudentForm.jsx dalam folder students. Tetapkan dalam komponen NewStudentForm negeri tempatan untuk medan yang diperlukan oleh anda, tulis untuk setiap medan pemprosesan, seperti yang ditunjukkan dalam pelajaran.

Kembalikan dalam komponen NewStudentForm markup yang mengandungi tajuk dan borang kosong.