React හි සාරාංශ ප්රභවීය ප්රතිචාර දැක්වීමේ ක්රම
දැන් අපගේ නිෂ්පාදන අරාව පහත ආකාරයෙන් පෙනෙනු ඇතැයි සිතමු:
const initProds = [
{id: id(), name: 'prod1', cost: 'cost1', catg: 'catg1'},
{id: id(), name: 'prod2', cost: 'cost2', catg: 'catg2'},
{id: id(), name: 'prod3', cost: 'cost3', catg: 'catg3'},
];
අපි මෙම නිෂ්පාදන HTML වගුවක ආකාරයෙන් ප්රදර්ශනය කරමු.
වගුවේ ඕනෑම කොටුවක් මත ක්ලික් කිරීමේදී එම කොටුව තුළ
සංස්කරණය සඳහා ආදාන ක්ෂේත්රයක් දිස්වන පරිදි මෙය කරමු.
මෙම ගැටළුව විසඳීම සඳහා අපි 3 ප්රතිචාර දැක්වීම් සාදමු.
Products ප්රතිචාර දැක්වීම නිෂ්පාදන සමඟ state එකක්
අඩංගු කරගෙන නිෂ්පාදන ප්රදර්ශනය කිරීම සඳහා Product
ප්රතිචාර දැක්වීම් භාවිතා කරයි. Product ප්රතිචාර දැක්වීම
එලෙසම නිශ්චිත නිෂ්පාදන ක්ෂේත්රයක් (නම, මිල, ප්රවර්ගය) ප්රදර්ශනය
කිරීම සඳහා ProductField ප්රතිචාර දැක්වීම් භාවිතා කරයි.
ProductField ප්රතිචාර දැක්වීම ක්ෂේත්රයේ පෙළ ප්රදර්ශනය කරයි
නැතහොත් එය සංස්කරණය කිරීම සඳහා ආදාන ක්ෂේත්රයක් පෙන්වයි.
මෙම සංස්කරණ ක්රමය හෝ ප්රදර්ශන ක්රමය මෙම ප්රතිචාර දැක්වීමේ
state එක මගින් පාලනය කරයි.
එනම්, අපි මෙම ක්රමය ප්රභවීය state එකේ ගබඩා නොකරමු. එහිදී එය ඉතා අපහසු වනු ඇත, මන්ද සෑම නිෂ්පාදන ක්ෂේත්රයක් සඳහාම ක්රමය සඳහන් කිරීමට අපට සිදුවන අතර, එය අපගේ state එක පහත දැක්වෙන ආකාරයට පරිවර්තනය කරයි:
const initProds = [
[
{field: 'name', value: 'prod1', isEdit: false},
{field: 'cost', value: 'cost1', isEdit: false},
{field: 'catg', value: 'catg1', isEdit: false},
],
[
{field: 'name', value: 'prod2', isEdit: false},
{field: 'cost', value: 'cost2', isEdit: false},
{field: 'catg', value: 'catg2', isEdit: false},
],
[
{field: 'name', value: 'prod3', isEdit: false},
{field: 'cost', value: 'cost3', isEdit: false},
{field: 'catg', value: 'catg3', isEdit: false},
],
]
කෙසේ වෙතත්, අපි එවැනි state එකක් නිර්මාණය නොකර,
පැවති එයම අතහැර දමමු. සරලවම, සෑම
ProductField ප්රතිචාර දැක්වීමකම උදාහරණයක්
තමන්ගේම state එක භාවිතා කර ක්රමය නියාමනය කරයි:
සංස්කරණය හෝ ප්රදර්ශනය.
මේ ආකාරයෙන්, ප්රභවීය ප්රතිචාර දැක්වීම දත්ත සමඟ state එකක් ගබඩා කරන අතර, අපගේ අභ්යන්තර ප්රතිචාර දැක්වීම මෙම දත්ත props හරහා ලබාගෙන ඒ සමඟම තමන්ගේ ක්රමය වෙනස් කිරීම සඳහා තමන්ගේම state එකක් අඩංගු කරගනී.
ඉතින්, අපි විස්තර කරන ලද දේ ක්රියාත්මක කරමු.
Products ප්රතිචාර දැක්වීම
function Products() {
const [prods, setProds] = useState(initProds);
function changeField(id, field, event) {
setProds(prods.map(prod => {
if (prod.id === id) {
prod[field] = event.target.value;
}
return prod;
}));
}
const rows = prods.map(prod => {
return <Product
key ={prod.id}
id ={prod.id}
name={prod.name}
cost={prod.cost}
catg={prod.catg}
changeField={changeField}
/>;
});
return <div>
<table>
<tbody>
{rows}
</tbody>
</table>
</div>;
}
Product ප්රතිචාර දැක්වීම
function Product({ id, name, cost, catg, changeField }) {
return <tr>
<ProductField id={id} text={name} type="name" changeField={changeField} />
<ProductField id={id} text={cost} type="cost" changeField={changeField} />
<ProductField id={id} text={catg} type="catg" changeField={changeField} />
</tr>;
}
ProductField ප්රතිචාර දැක්වීම
function ProductField({ id, text, type, changeField }) {
const [isEdit, setIsEdit] = useState(false);
return <td>
{
isEdit
? <input
value={text}
onChange={event => changeField(id, type, event)}
onBlur={() => setIsEdit(false)}
/>
: <span onClick={() => setIsEdit(true)}>{text}</span>
}
</td>;
}
ප්රායෝගික කාර්යයන්
පෙර පාඩම් වලදී ඔබ විසින් සාදන ලද
Users සහ User ප්රතිචාර දැක්වීම් සමඟ
සමාන මෙහෙයුම් සිදු කරන්න.
