Rakaman dan Pengeditan Data melalui Parameter URL dalam React Router

Aplikasi kita kini boleh memuatkan data untuk setiap produk individu dari penyimpanan. Dalam pelajaran ini, kita akan mula melaksanakan penambahan maklumat produk dan pengeditan melalui parameter URL.

Untuk merekodkan atau mengubah data, kita akan sekali lagi menggunakan komponen Form. Mari kita buka product.jsx dan tambahkan pada akhir susun atur tompok untuk mengedit data produk - selepas perenggan terakhir (jangan lupa untuk mengimport Form ke dalam fail):

<Form action="edit">
	<button type="submit">edit</button>
</Form>

Sekarang kita ada tombol pengeditan pada halaman produk. Seterusnya, kita akan menjadikan supaya apabila tombol ini ditekan, kita akan dihalakan ke halaman borang di mana kita boleh memasukkan data. Untuk ini, kita akan mencipta satu lagi laluan dengan products/:productId/edit. Mari buat kerangka untuk ini.

Jadi, dalam folder routes kita akan buat fail baru edit.jsx. Di sini kita akan ada borang dengan medan name, cost dan amount untuk diisi, serta tombol simpan. Semua ini akan berada dalam komponen EditProduct. Pastikan untuk menetapkan atribut name, ia akan diperlukan dalam pelajaran seterusnya:

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Name:</span>
				<input placeholder="name" type="text" name="name" />
			</div>
			<div>
				<span>Cost:</span>
				<input placeholder="cost" type="text" name="cost" />
			</div>
			<div>
				<span>Amount:</span>
				<input placeholder="amount" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">save</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, tambahkan tombol mengedit data pelajar. Buat fail edit.jsx untuk mengedit dengan fungsi EditStudent, yang akan mengandungi borang untuk mengisi data tentang pelajar.