Redux එකට ආකෘතියක් එකතු කිරීම

පසුගිය පාඩමේදී අපි දැනගත්තේ, ආකෘතියක ආදාන ක්ෂේත්‍ර සඳහා සංරචකයක් තුළ පමණක් ක්‍රියා කරන state භාවිතා කළ හැකි බවයි, එමෙන්ම අපි හිස් ආකෘතියක් නිර්මාණය කළෙමු.

අපි form ටැග් ඇතුළත, තොරතුරු ඇතුලත් කිරීම සඳහා එක් එක් ක්ෂේත්‍රය සඳහා HTML markup එක තබමු. අපගේ පළමු ආදාන ක්ෂේත්‍රය නිෂ්පාදනයේ නම සඳහා වන අතර එහි markup මෙසේ වේ:

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

දෙවැන්න නිෂ්පාදනයේ විස්තරය සඳහා වන textarea ක්ෂේත්‍රය වේ:

products/NewProductForm.jsx<p>
  <label htmlFor="productDesc">විස්තරය:</label>
  <textarea
    id="productDesc"
    name="productDesc"
    value={desc}
    onChange={onDescChanged}
  />
</p>

ඉතිරි ආදාන ක්ෂේත්‍ර දෙක සඳහා කේතය ඔබම ලියන්න, මිල සහ ප්‍රමාණය සඳහා, පිළිවලින් productPrice සහ productAmount ID ඇතිව.

ආදාන ක්ෂේත්‍ර හතරම අවසන් වූ පසු, වසා දැමීමේ form ටැගයට පෙර, සුරැකීම සඳහා බොත්තමක් එක් කරන්න:

products/NewProductForm.jsx<button type="button">සුරකින්න</button>

අපගේ ආකෘති සංරචකය සූදානම්. එය ප්‍රධාන පිටුවේ පෙන්වමු. මෙය සිදු කිරීම සඳහා, root.jsx ගොනුව විවෘත කර, සංරචකය එහි import කරන්න:

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

එය hr ටැගය සහ ProductsList සංරචකය මැදට මෙලෙස ඇතුළත් කරන්න:

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

අපගේ යෙදුම ආරම්භ කර ආකෘතිය සහ නිෂ්පාදන ලැයිස්තුව දෙස බලමු. අපි 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;
}