Запись и редактирование данных по URL параметрам в React Router
Наше приложение теперь может загружать данные для каждого отдельного продукта из хранилища. На этом уроке мы начнем реализовать добавление информации о продукте и ее редактирование по URL параметрам.
Для того, чтобы заносить или изменять данные
мы будем снова использовать компонент
Form. Для начала давайте откроем
product.jsx и добавим в конце верстки
кнопочку для редактирования данных
продукта - после последнего абзаца (не
забудьте импортировать Form в файл):
<Form action="edit">
<button type="submit">edit</button>
</Form>
Теперь у нас на страничке продукта есть кнопка
редактирования. Далее мы сделаем так, чтобы
при нажатии на эту кнопку нас перебрасывало
на страничку с формой, где мы сможем вносить
данные. Для этого, мы создадим еще один маршрут
с products/:productId/edit. Давайте
сделаем для этого макет.
Итак, в папке routes мы создадим новый файл
edit.jsx. Здесь у нас будет форма с
полями name, cost и amount
для заполнения, а также кнопкой сохранения. Все
это у нас будет в компоненте EditProduct.
Обязательно пропишем атрибуты name, они
нам понадобятся в следующих уроках:
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;
Возьмите приложение, созданное вами в
заданиях к прошлым урокам. Пользуясь
материалами урока, добавьте кнопку
редактирования данных студента.
Создайте файл edit.jsx для
редактирования с функцией
EditStudent, в которой будет
форма для заполнения данных о студенте.