Տվյալների գրանցում և խմբագրում URL պարամետրերով React Router-ում

Մեր հավելվածն այժմ կարող է բեռնել յուրաքանչյուր առանձին ապրանքի տվյալները պահեստից: Այս դասում մենք կսկսենք իրականացնել ապրանքի մասին տեղեկատվության ավելացումը և դրա խմբագրումը URL պարամետրերով:

Տվյալներ մուտքագրելու կամ փոփոխելու համար մենք նորից կօգտագործենք Form բաղադրիչը: Սկսելու համար եկեք բացենք product.jsx և ավելացնենք վերջում կոճակ ապրանքի տվյալները խմբագրելու համար՝ վերջին պարբերությունից հետո (մի mոռացեք ներմուծել Form ֆայլը):

routes/product.jsx<Form action="edit">
  <button type="submit">խմբագրել</button>
</Form>

Այժմ մենք ունենք խմբագրման կոճակ ապրանքի էջում: Հաջորդը, մենք կանենք այնպես, որ այս կոճակը սեղմելիս մեզ վերահղի ձևի էջ, որտեղ մենք կկարողանանք մուտքագրել տվյալներ: Դրա համար մենք կստեղծենք մեկ այլ երթուղի products/:productId/edit-ով: Եկեք դրա համար կաղապար ստեղծենք:

Այսպիսով, routes պանակում մենք կստեղծենք նոր ֆայլ edit.jsx: Այստեղ մենք կունենանք ձև՝ name, cost և amount դաշտերով լրացման համար, ինչպես նաև պահպանելու կոճակով: Բոլորը սա կլինի մեր EditProduct բաղադրիչում: Անպայման գրենք name ատրիբուտները, դրանք մեզ հարկավոր կլինեն հաջորդ դասերին:

routes/edit.jsximport { Form } from 'react-router-dom';

function EditProduct() {
  return (
    <Form method="post" id="product-form">
      <div>
        <span>Անուն:</span>
        <input placeholder="անուն" type="text" name="name" />
      </div>
      <div>
        <span>Արժեք:</span>
        <input placeholder="արժեք" type="text" name="cost" />
      </div>
      <div>
        <span>Քանակ:</span>
        <input placeholder="քանակ" type="text" name="amount" />
      </div>
      <p>
        <button type="submit">պահպանել</button>
      </p>
    </Form>
  );
}

export default EditProduct;