Adatok rögzítése és szerkesztése URL paraméterek alapján a React Routerben

Alkalmazásunk most már képes betölteni az adatokat minden egyes termékhez a tárolóból. Ezen a leckén elkezdjük megvalósítani a termékekkel kapcsolatos információk hozzáadását és szerkesztését URL paraméterek segítségével.

Ahhoz, hogy adatokat rögzíthessünk vagy módosíthassunk, isét a Form komponenst fogjuk használni. Kezdésként nyissuk meg a product.jsx fájlt és adjuk hozzá a végéhez egy gombot a termék adatainak szerkesztéséhez - az utolsó bekezdés után (ne felejtsük el importálni a Form-ot a fájlba):

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

Most már van egy szerkesztés gomb a termék oldalán. Ezután úgy fogjuk beállítani, hogy amikor megnyomjuk ezt a gombot, az átirányít minket egy űrlapot tartalmazó oldalra, ahol adatokat tudunk megadni. Ehhez létre fogunk hozni egy másik útvonalat a products/:productId/edit útvonallal. Készítsünk ehhoz egy sablont.

Tehát a routes mappában létrehozunk egy új fájlt edit.jsx. Itt lesz egy űrlapunk name, cost és amount mezőkkel a kitöltéshez, valamint egy mentés gombbal. Mindez a EditProduct komponensben lesz. Mindíg adjuk meg a name attribútumokat, ezekre szükségünk lesz a következő leckékben:

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

function EditProduct() {
  return (
    <Form method="post" id="product-form">
      <div>
        <span>Név:</span>
        <input placeholder="név" type="text" name="name" />
      </div>
      <div>
        <span>Költség:</span>
        <input placeholder="költség" type="text" name="cost" />
      </div>
      <div>
        <span>Mennyiség:</span>
        <input placeholder="mennyiség" type="text" name="amount" />
      </div>
      <p>
        <button type="submit">mentés</button>
      </p>
    </Form>
  );
}

export default EditProduct;