Реактта ата-ана күйін бала компонентте өңдеу

Енді өнімдерді өңдеу үшін ендітірелерді қолданайық. Ол үшін бала компонентте батырма жасайық.

Осы батырмаға бірінші рет басқанда атауы мен бағасының орнына оларды өңдеуге арналған ендітірелер пайда болсын, ал екінші рет басқанда ендітірелердің орнына тағы да мәтіндер шықсын.

Өнімдер массивіне өзгеріс енгізейік, 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>;
}

Енді өңдеу режимінде деректері бар ендітірелер, ал қарапайым режимде - спандар болуы үшін жасайық:

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>;
}

Ендітірелерге 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 компоненттерімен де осыған ұқсас амалдарды орындаңыз.