Запіс і рэдагаванне дадзеных па URL параметрах у React Router

Наша дадатак цяпер можа загружаць дадзеныя для кожнага асобнага прадукту з сховішча. На гэтым уроку мы пачнем рэалізаваць даданне інфармацыі пра прадукт і яе рэдагаванне па URL параметрах.

Для таго, каб заносіць або змяняць дадзеныя мы будзем зноў выкарыстоўваць кампанент Form. Для пачатку давайте адчынём product.jsx і дадамо ў канцы версткі кнопачку для рэдагавання дадзеных прадукту - пасля апошняга абзаца (не забудзьце імпартаваць Form у файл):

routes/product.jsx<Form action="edit">
  <button type="submit">edit</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>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;