Волидани ҳолати волидайн дар компоненти фарзанд дар 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},
];

Компоненти Product

Дар маҳсулот тугмае барои таҳрир созем:

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

Биёд акнун ба компоненти 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, ки шумо дар дарсҳои гузашта сохтаед, анҷом диҳед.