Tietojen tallentaminen ja muokkaaminen URL-parametrien avulla React Routerissa

Sovelluksemme voi nyt ladata tiedot kustakin tuotteesta erikseen tietovarastosta. Tällä oppitunnilla aloitamme toteuttamaan tuotetietojen lisäämisen ja muokkaamisen URL-parametrien avulla.

Jotta voimme tallentaa tai muuttaa tietoja käytämme jälleen komponenttia Form. Aluksi avataan product.jsx ja lisätään lopetusosion jälkeen painike tuotetietojen muokkaamiseen - viimeisen kappaleen jälkeen (älä unohda tuoda Form tiedostoon):

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

Nyt tuotesivullamme on muokkauspainike. Seuraavaksi teemme niin, että kun painamme tätä painiketta, meidät siirretään lomakkeen sisältävälle sivulle, jossa voimme syöttää tiedot. Tätä varten luomme toisen reitin polulla products/:productId/edit. Luodaan tätä varten malli.

Joten, routes-kansiossa luomme uuden tiedoston edit.jsx. Tässä on lomake kentillä name, cost ja amount täytettäväksi, sekä tallennuspainike. Kaikki tämä tulee olemaan komponentissa EditProduct. Määritetään ehdottomasti attribuutit name, ne tarvitaan seuraavissa oppitunneissa:

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

function EditProduct() {
  return (
    <Form method="post" id="product-form">
      <div>
        <span>Nimi:</span>
        <input placeholder="nimi" type="text" name="name" />
      </div>
      <div>
        <span>Hinta:</span>
        <input placeholder="hinta" type="text" name="cost" />
      </div>
      <div>
        <span>Määrä:</span>
        <input placeholder="määrä" type="text" name="amount" />
      </div>
      <p>
        <button type="submit">tallenna</button>
      </p>
    </Form>
  );
}

export default EditProduct;