Valideynin state-nin usaq komponentde redaktə edilmesi React-də

Gəlin indi məhsullarımızı inputlar vasitəsilə redaktə edək. Bunun üçün usaq komponentdə düymə edək.

Bu düyməyə ilk klikdə məhsulun adı və qiyməti ilə birlikdə onları redaktə etmək üçün inputlar görünsün, ikinci klikdə isə inputların yerinə yenidən mətnlər görünsün.

Məhsullar massivində dəyişiklik edək, isEdit xassəsini əlavə edək (sadəlik üçün səbət işini isə çıxaraq):

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 Komponenti

Məhsulda redaktə etmək üçün düymə edək:

function Product({ id, name, cost, isEdit }) {
	return <div>
		ad: <span>{name}</span>
		qiymət: <span>{cost}</span>
		<button>redaktə</button>
	</div>;
}

Gəlin elə edək ki, bu düyməyə kliklədikdə valideyn komponentdən ötürülən toggleMode adlı funksiya işə düşsün:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		ad: <span>{name}</span>
		qiymət: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			redaktə
		</button>
	</div>;
}

Hələlik toggleMode-ın realizasiyası yoxdur, amma bilirik ki, o valideyn komponentdə yerləşəcək, parametr kimi məhsulun id-sını qəbul edəcək və məhsulun isEdit xassəsini əksinə dəyişəcək.

Gəlin həmçinin elə edək ki, düymənin mətni hər klikdə dəyişsin:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		ad: <span>{name}</span>
		qiymət: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'yadda saxla': 'redaktə'}
		</button>
	</div>;
}

Gəlin indi elə edək ki, redaktə rejimində məlumatlar ilə inputlarımız olsun, adi rejimdə isə span-lar:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		ad: {isEdit ? <input value={name} /> : <span>{name}</span>}
		qiymət: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'yadda saxla': 'redaktə'}
		</button>
	</div>;
}

Inputlarımızı onChange hadisəsinə bağlayaq, onunda hansısa valideyn funksiyası olan editProd-ı çağıracaq:

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		ad: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		qiymət: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'yadda saxla': 'redaktə'}
		</button>
	</div>;
}

Products Komponenti

Gəlin indi Products komponentinə keçək. Onda toggleMode funksiyasını realizə edək:

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

Həmçinin onda editProd funksiyasını realizə edək:

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

Məhsul teqinə atribut kimi bizim toggleMode və editProd funksiyalarımızı ötürək:

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 komponentinin son kodu aşağıdakı kimi olacaq:

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

Praktiki tapşırıqlar

Əvvəlki dərslərdə yaratdığınız Users və User komponentləri ilə də eyni əməliyyatları yerinə yetirin.