Ghi và chỉnh sửa dữ liệu theo tham số URL trong React Router

Ứng dụng của chúng ta bây giờ có thể tải dữ liệu cho từng sản phẩm riêng biệt từ kho lưu trữ. Trong bài học này, chúng ta sẽ bắt đầu thực hiện việc thêm thông tin về sản phẩm và chỉnh sửa nó theo tham số URL.

Để ghi hoặc thay đổi dữ liệu, chúng ta sẽ lại sử dụng component Form. Đầu tiên, hãy mở product.jsx và thêm vào cuối phần giao diện một nút nhỏ để chỉnh sửa dữ liệu sản phẩm - sau đoạn văn cuối cùng (đừng quên import Form vào file):

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

Bây giờ chúng ta đã có nút chỉnh sửa trên trang sản phẩm. Tiếp theo, chúng ta sẽ làm sao để khi nhấn vào nút này, nó sẽ chuyển hướng chúng ta đến một trang có biểu mẫu, nơi chúng ta có thể nhập dữ liệu. Để làm điều này, chúng ta sẽ tạo một route khác với products/:productId/edit. Hãy tạo một layout cho nó.

Vậy, trong thư mục routes, chúng ta sẽ tạo một file mới edit.jsx. Ở đây chúng ta sẽ có một biểu mẫu với các trường name, cost và amount để điền, cũng như nút lưu. Tất cả những thứ này sẽ nằm trong component EditProduct. Nhớ ghi các thuộc tính name, chúng sẽ cần cho các bài học tiếp theo:

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;

Hãy lấy ứng dụng mà bạn đã tạo trong các bài tập của những bài học trước. Sử dụng tài liệu của bài học, hãy thêm nút chỉnh sửa dữ liệu sinh viên. Tạo file edit.jsx cho việc chỉnh sửa với hàm EditStudent, trong đó sẽ có một biểu mẫu để điền thông tin về sinh viên.