React Router-da URL parametrleri vasitəsilə məlumatların yazılması və redaktə edilməsi
Artıq bizim tətbiqimiz hər bir ayrı-ayrı məhsul üçün məlumatları anbardan yükləyə bilir. Bu dərsdə biz URL parametrleri vasitəsilə məhsul haqqında məlumat əlavə etməni və onun redaktə edilməsini həyata keçirməyə başlayacığıq.
Məlumatları daxil etmək və ya dəyişmək üçün biz yenə Form komponentindən istifadə edəcəyik. Əvvəlcə gəlin product.jsx faylını açaq və qurmanın sonunda məhsulun məlumatlarını redaktə etmək üçün düymə əlavə edək - son abzasdan sonra (Form-u fayla import etməyi unutmayın):
<Form action="edit">
<button type="submit">redaktə et</button>
</Form>
Artıq məhsul səhifəsində redaktə etmək düyməmiz var. Sonra, bu düyməni basdıqda bizim məlumatları daxil edə biləcəyimiz formanın olduğu səhifəyə yönləndirilməyimizi təmin edəcəyik. Bunun üçün biz products/:productId/edit ilə başqa bir marşrut yaradacağıq. Gəlin bunun üçün bir şablon hazırlayaq.
Beləliklə, routes qovluğunda biz edit.jsx adlı yeni fayl yaradacığıq. Burada name, cost və amount doldurma sahələri və həmçinin saxla düyməsi olan bir forma olacaq. Bütün bunlar EditProduct komponentində olacaq. Mütləq name atributlarını təyin edin, onlar gələcək dərslərdə bizə lazım olacaq:
import { Form } from 'react-router-dom';
function EditProduct() {
return (
<Form method="post" id="product-form">
<div>
<span>Ad:</span>
<input placeholder="ad" type="text" name="name" />
</div>
<div>
<span>Qiymət:</span>
<input placeholder="qiymət" type="text" name="cost" />
</div>
<div>
<span>Miqdar:</span>
<input placeholder="miqdar" type="text" name="amount" />
</div>
<p>
<button type="submit">saxla</button>
</p>
</Form>
);
}
export default EditProduct;
Əvvəlki dərslərin tapşırıqlarında yaratdığınız tətbiqi götürün. Dərsin materiallarından istifadə edərək, tələbə məlumatlarını redaktə etmək düyməsi əlavə edin. edit.jsx faylını tələbə haqqında məlumatları daxil etmək üçün formanın olduğu EditStudent funksiyası ilə redaktə etmək üçün yaradın.
