Zapisywanie i edytowanie danych za pomocą parametrów URL w React Router

Nasza aplikacja może teraz ładować dane dla każdego osobnego produktu z magazynu. W tej lekcji zaczniemy implementować dodawanie informacji o produkcie i jej edytowanie za pomocą parametrów URL.

Aby zapisywać lub zmieniać dane będziemy znowu używać komponentu Form. Na początek otwórzmy product.jsx i dodajmy na końcu wersji przycisk do edytowania danych produktu - po ostatnim akapicie (nie zapomnij zaimportować Form do pliku):

routes/product.jsx<Form action="edit">
  <button type="submit">edit</button>
</Form>

Teraz mamy na stronice produktu przycisk edytowania. Następnie zrobimy tak, żeby po naciśnięciu tego przycisku przenosiło nas na stronkę z formularzem, gdzie będziemy mogli wpisywać dane. W tym celu, utworzymy jeszcze jedną trasę z products/:productId/edit. Zróbmy do tego szablon.

A więc, w folderze routes utworzymy nowy plik edit.jsx. Tutaj będziemy mieli formularz z polami name, cost i amount do wypełnienia, a także przyciskiem zapisywania. Wszystko to będzie w komponencie EditProduct. Obowiązkowo wpiszmy atrybuty name, one będą nam potrzebne w następnych lekcjach:

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;