Zápis a úprava údajov pomocou URL parametrov v React Router

Naša aplikácia teraz dokáže načítať údaje pre každý jednotlivý produkt z úložiska. V tejto lekcii začneme implementovať pridávanie informácií o produkte a ich úpravu pomocou URL parametrov.

Na zaznamenávanie alebo zmenu údajov budeme opäť používať komponent Form. Na začiatok otvorme product.jsx a pridajme na koniec rozloženia tlačidlo na úpravu údajov produktu - za posledným odsekom (nezabudnite importovať Form do súboru):

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

Teraz máme na stránke produktu tlačidlo na úpravu. Ďalej spravíme to, aby po kliknutí na toto tlačidlo nás presmerovalo na stránku s formulárom, kde budeme môcť zadávať údaje. Na to vytvoríme ďalšiu trasu s products/:productId/edit. Poďme na to vytvoriť šablónu.

Takže, v priečinku routes vytvoríme nový súbor edit.jsx. Tu bude formulár s poliami name, cost a amount na vyplnenie, ako aj tlačidlom uloženia. Všetko to bude v komponente EditProduct. Nezabudnite uviesť atribúty name, budú sa nám hodiť v nasledujúcich lekciách:

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;