හර්ෂක සංරචකයක දේවල තත්වය සංස්කරණය කිරීම React හි

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

මෙම බොත්තම මත පළමු ක්ලික් කිරීමෙන් නම සහ මිල අතරට ඒවා සංස්කරණය කිරීම සඳහා ආදාන ක්ෂේත්‍ර පෙනෙනු ඇත, දෙවන ක්ලික් කිරීමෙන් ආදාන ක්ෂේත්‍ර වෙනුවට නැවත අකුරු පෙනෙනු ඇත.

නිෂ්පාදිත සමඟ අරාවට වෙනස්කම් කරමු, එක් කරමින් isEdit ගුණාංගය (සහ කරත්තය සමඟ වැඩ සරල කිරීම සඳහා ඉවත් කරමු):

const initProds = [
	{id: id(), name: 'product1', cost: 100, isEdit: false},
	{id: id(), name: 'product2', cost: 200, isEdit: false},
	{id: id(), name: 'product3', cost: 300, isEdit: false},
];

නිෂ්පාදිත සංරචකය

නිෂ්පාදිතයක සංස්කරණය සඳහා බොත්තමක් සාදමු:

function Product({ id, name, cost, isEdit }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		<button>edit</button>
	</div>;
}

මෙම බොත්තම මත ක්ලික් කිරීමෙන් යම් ශ්‍රිතයක් toggleMode, දේවල සංරචකයෙන් ලබා දී ඇති එකක් ක්‍රියාත්මක වන පරිදි සකසමු:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			edit
		</button>
	</div>;
}

අපට දැනට toggleMode ක්‍රියාත්මක කිරීමක් නොමැත, නමුත් එය පිහිටා ඇත්තේ දේවල සංරචකය තුළ බවත්, පරාමිතියක් ලෙස භාර ගන්නේ නිෂ්පාදිතයේ id සහ isEdit ගුණාංගය විරුද්ධ අගයකට වෙනස් කරන බවත් අපි දනිමු.

බොත්තමේ අකුරු පැමිණෙන සෑම අවස්ථාවකම වෙනස් වන පරිදිද සකසමු:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

දැන් අපි සංස්කරණ ප්‍රකාරයේදී දත්ත සහිත ආදාන ක්ෂේත්‍ර තිබෙන පරිදි සකසමු, සාමාන්‍ය ප්‍රකාරයේදී - span:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: {isEdit ? <input value={name} /> : <span>{name}</span>}
		cost: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

අපගේ ආදාන ක්ෂේත්‍රවලට onChange සිදුවීම බඳිමු, එහිදී අපි යම් දේවල ශ්‍රිතයක් editProd ක්‍රියාත්මක කරමු:

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		name: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		cost: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

නිෂ්පාදිත සංරචකය

දැන් අපි Products සංරචකය වෙත යමු. එහි toggleMode ශ්‍රිතය ක්‍රියාත්මක කරමු:

function toggleMode(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.isEdit = !prod.isEdit;
		}
		
		return prod;
	}));
}

එහි editProd ශ්‍රිතයද ක්‍රියාත්මක කරමු:

function editProd(id, field, event) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod[field] = event.target.value;
		}
		
		return prod;
	}));
}

නිෂ්පාදිත ටැගයට අපගේ ශ්‍රිත toggleMode සහ editProd ගුණාංග ලෙස සම්ප්‍රේෂණය කරමු:

const items = prods.map(prod => {
	return <Product
		key ={prod.id}
		id  ={prod.id}
		name={prod.name}
		cost={prod.cost}
		isEdit={prod.isEdit}
		toggleMode={toggleMode}
		editProd={editProd}
	/>;
});

Products සංරචකයේ අවසාන කේතය පහත පරිදි වේ:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function toggleMode(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.isEdit = !prod.isEdit;
			}
			
			return prod;
		}));
	}
	
	function editProd(id, field, event) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod[field] = event.target.value;
			}
			
			return prod;
		}));
	}
	
	const result = prods.map(prod => {
		return <Product
			key ={prod.id}
			id  ={prod.id}
			name={prod.name}
			cost={prod.cost}
			isEdit={prod.isEdit}
			toggleMode={toggleMode}
			editProd={editProd}
		/>;
	});
	
	return <div>
		{result}
	</div>;
}

ප්‍රායෝගික කාර්යයන්

ඔබ විසින් පෙර පාඩම්වලදී සාදන ලද Users සහ User සංරචක සමඟ සමාන ක්‍රියාමාර්ග සිදු කරන්න.