Дар компоненти React фарзанди ҳолати волидайнро тағйир додан

Дар дарси қаблӣ мо ҳолат бо маълумотҳо дар компоненти волидайн нигоҳ дошта мешуд, ва компонентҳои фарзандӣ ин маълумотҳоро ба сурати пропсҳо мегирифтанд.

Бигзор акнун мо мехоҳем маҳсулоти худро тағйир диҳем. Биёед, масалан, тугмае созем, ки маҳсули моро ба сабад мегузорад. Барои оғоз биёед ба массивҳои мо бо маҳсулотҳо майдони inCart-ро илова кунем, ки нишон медиҳад, дар сабад маҳсулот аст ё не:

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

Дар компоненти Products ба тег бо маҳсулот як атрибути дигари inCart-ро илова кунем:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key   ={prod.id}
			name  ={prod.name}
			cost  ={prod.cost}
			inCart={prod.inCart}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Биёед дар компоненти фарзандӣ Product хабари дар бораи сабад ва тугмаро барои илова кардан ба сабад созем:

function Product({ id, name, cost, inCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'дар сабад' : 'дар сабад нест'}</span>
		<button>ба сабад</button>
	</div>;
}

Илова карданро амалӣ кунем

Мувофиқи қоидаҳои React компонент набояд пропсҳои худро тағйир диҳад. Ин маъно дорад, ки компоненти фарзандӣ наметавонад худро ба сабад гузорад, пропси inCart-ро тағйир дода. Ин дуруст нест.

Дуруст хоҳад буд аз компоненти волидайн дархост кардан, ки ҳолати худ prods-ро тағйир диҳад, маҳсулоти муайянро ба сабад гузошта.

Биёед бубинем, ки ин чӣ гуна анҷом дода мешавад.

Дар компоненти-волидайн функсияи addToCart-ро созем, ки параметраш id-и маҳсулотро қабул мекунад ва барои ин маҳсулот хосияти inCart-ро тағйир медиҳад ба true:

function addToCart(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.inCart = true;
		}
		
		return prod;
	}));
}

Ба тег бо маҳсулот атрибут илова кунем, ки ба он функсияи сохтаи моро медиҳем, инчунин атрибут, ки ба он id-и маҳсулотро медиҳем:

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

Чунон ки мебинед, ба пропсҳои компонентҳо метавон на танҳо баъзе маълумотҳоро дод, балки функсияҳоро низ.

Коди ниҳоии синфи Products хоҳад шуд ба ин сурат:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function addToCart(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.inCart = true;
			}
			
			return prod;
		}));
	}
	
	const items = prods.map(prod => {
		return <Product
			key      ={prod.id}
			id       ={prod.id}
			name     ={prod.name}
			cost     ={prod.cost}
			inCart   ={prod.inCart}
			addToCart={addToCart}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Акнун дар синфи фарзандӣ ба мо функсияи addToCart дастрас хоҳад буд. Ин функсияро бо клик кардан рӯи тугма даъват кунем, ба он параметр id-и маҳсулотро диҳем:

function Product({ id, name, cost, inCart, addToCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'дар сабад' : 'дар сабад нест'}</span>
		<button onClick={() => addToCart(id)}>ба сабад</button>
	</div>;
}

Хоҳад шуд, ки бо клик кардан рӯи тугма дар фарзанд функсияи волидайн даъват шавад, ки ҳолати волидайнро тағйир медиҳад. Тағйир додани ҳолати волидайн ба аз нав тарҳрезии компонентҳо ва аз нав расонидани маҳсули моро ба вуҷуд меорад, ки ба он пропси тағйирёфтаро медиҳад.

Компоненти User-ро аз дарси гузашта гиред. Чунон кунед, ки дар он тугма барои ба ҳаром андохтани корбар пайдо шавад.