Kufanya Mabadiliko kwenye Fomu katika Redux

Katika somo hili tutamaliza kazi ya kuonyesha taarifa kuhusu muuzaji kwenye fomu ya kuongeza bidhaa. Ili kufanya hivyo, tunahitaji kubadilisha kidogo muundo wa fomu.

Tufungue programu yetu ya bidhaa, na ndani yake faili NewProductForm.jsx. Hebu kabla ya amri return tuongeze kipande cha msimbo kwa muundo wa orodha inayotoka, ambayo tutachagua muuzaji. Tutaitengeneza kwa kutumia njia ya kawaida na map:

products/NewProductForm.jsxconst sellersList = sellers.map((seller) => (
  <option key={seller.id} value={seller.id}>
    {seller.name}
  </option>
))

Na sasa tutafanye mabadiliko kwenye muundo wenyewe. Ili kufanya hivyo kwenye fomu kati ya aya ya kwanza na ya pili (kati ya vitalu vya muundo kwa jina na maelezo ya bidhaa) tutaingiza aya na muundo ufuatao:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Muuzaji:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

Sasa tunaweza kuanzisha programu yetu. Kwenye fomu ya kuongeza kumetokea orodha ya wauzaji. Hebu tujaribu kujaza fomu kwa data, kuchagua mmoja wao na kubofya kitufe cha kuhifadhi. Sasa, kama tukitazama kwenye Redux DevTools, tutaona mabadiliko - kwenye bidhaa mpya iliyoongezwa kumetokea sifa seller na kitambulisho cha muuzaji aliyechaguliwa kama thamani. Pia kwenye kichupo cha State sasa inaonyesha sehemu mbili products na sellers.