Ծնողի state-ի խմբագրում երեխա կոմպոնենտում React-ում

Այժմ եկեք խմբագրենք մեր ապրանքները օգտագործելով input դաշտեր: Դրա համար երեխա կոմպոնենտում ստեղծենք կոճակ:

Առաջին սեղմումով այս կոճակի վրա թող ապրանքի անվանման և գնի փոխարեն հայտնվեն input դաշտեր դրանց խմբագրման համար, իսկ երկրորդ սեղմումով input դաշտերի փոխարեն կրկին հայտնվեն տեքստեր:

Փոփոխություններ կատարենք ապրանքների զանգվածում, ավելացնելով 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},
];

Product կոմպոնենտ

Ապրանքի մեջ ստեղծենք խմբագրման կոճակ.

function Product({ id, name, cost, isEdit }) {
	return <div>
		անուն: <span>{name}</span>
		գին: <span>{cost}</span>
		<button>խմբագրել</button>
	</div>;
}

Եկեք անենք, որ այս կոճակի սեղմումով կանչվի ինչ-որ ֆունկցիա toggleMode, որը փոխանցվել է ծնող կոմպոնենտից.

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		անուն: <span>{name}</span>
		գին: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			խմբագրել
		</button>
	</div>;
}

Մենք դեռ չունենք toggleMode-ի իրականացում, բայց գիտենք, որ այն կգտնվի ծնող կոմպոնենտում, պարամետրով կընդունի id ապրանքի և կփոխի isEdit հատկությունը ապրանքի հակառակ արժեքի:

Նաև եկեք անենք, որ կոճակի տեքստը փոխվի յուրաքանչյուր սեղմման ժամանակ.

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		անուն: <span>{name}</span>
		գին: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'պահպանել': 'խմբագրել'}
		</button>
	</div>;
}

Եկեք այժմ անենք, որ խմբագրման ռեժիմում ունենանք input դաշտեր տվյալներով, իսկ սովորական ռեժիմում - span տարրեր.

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		անուն: {isEdit ? <input value={name} /> : <span>{name}</span>}
		գին: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'պահպանել': 'խմբագրել'}
		</button>
	</div>;
}

Կապենք մեր input դաշտերը onChange իրադարձության հետ, որում կանչվի ինչ-որ ծնող ֆունկցիա editProd.

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		անուն: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		գին: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'պահպանել': 'խմբագրել'}
		</button>
	</div>;
}

Products կոմպոնենտ

Եկեք այժմ անցնենք 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 կոմպոնենտների հետ: