Vormi lisamine Reduxi

Eelmisel tunnil saime teada, et vormi input väljade jaoks saab kasutada staatuseid, mis töötavad ainult ühe komponendi sees, ja loome tühja vormi.

Paneme siltide form sisse iga välja jaoks märgistuse, kuhu teavet sisestatakse. Esimene input on toote nime ja selle märgistuse eest see näeb välja selline:

products/NewProductForm.jsx<form>
  <p>
    <label htmlFor="productName">Nimi:</label>
    <input
      id="productName"
      name="productName"
      value={name}
      onChange={onNameChanged}
    />
  </p>
</form>

Teine on textarea toote kirjelduse jaoks:

products/NewProductForm.jsx<p>
  <label htmlFor="productDesc">Kirjeldus:</label>
  <textarea
    id="productDesc"
    name="productDesc"
    value={desc}
    onChange={onDescChanged}
  />
</p>

Kirjutage ise kood kahele ülejäänud inputile hinda ja koguse jaoks ID-ga productPrice ja productAmount vastavalt.

Pärast kõiki nelja input välja enne sulgavat silti form lisage salvestamise nupp:

products/NewProductForm.jsx<button type="button">salvesta</button>

Meie vormi komponent on valmis. Kuvame seda pealehel. Selleks avame faili root.jsx, impordime sinna komponendi:

app/root.jsximport { NewProductForm } from '../parts/products/NewProductForm'

Ja sisestame selle siltide hr ja komponendi ProductsList vahele nii:

app/root.jsx<hr></hr>
<NewProductForm />
<ProductsList />

Käivitame oma rakenduse ja imetleme vormi ja toodete nimekirja. Lisame veel stiilid faili index.css:

index.css#main-page {
  max-width: 600px;
}

select,
textarea,
input,
button {
  font-size: 18px;
}

form {
  margin-bottom: 20px;
  border-bottom: 2px solid lightgray;
  padding-bottom: 10px;
}

form p {
  margin: 5px;
}