Записване и редактиране на данни чрез 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;