Reakt-da ene komponentiň ýagdaýyny çalyşma komponentde üýtgetmek

Indi girişler ýardamynda önümlerimizi redaktirlemegi dowam edeliň. Bunun üçin çalyşma komponentinde düwmäni düzeliň.

Bu düwmä ilkinji gezek basylanynda, onuň ady we bahasynyň ýerine redaktirlemek üçin girişler peýda bolsun, ikinji gezek basylanynda bolsa girişleriň ýerine ýene-de teksti görkezsin.

Önümler masivine üýtgeşmeleri girizeliň, şol sanda isEdit aýratynlygyny goşuň (we ýönekeýleşdirmek üçin sebet bilen işi aýryň):

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

Önümde redaktirlemek üçin düwme düzeliň:

function Product({ id, name, cost, isEdit }) {
	return <div>
		ady: <span>{name}</span>
		bahasy: <span>{cost}</span>
		<button>redaktirle</button>
	</div>;
}

Bu düwmä basylanynda, ene komponentden geçirilen birnäçe toggleMode funksiýasynyň çagyrylmagyny üpjün edeliň:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		ady: <span>{name}</span>
		bahasy: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			redaktirle
		</button>
	</div>;
}

Häzir bize toggleMode funksiýasynyň amaly ýok, ýöne onuň ene komponentde ýerleşjekdigini, parametri hökmünde id önümini kabul edjekdigini we isEdit aýratynlygyny tersine üýtgedjekdigini bilýäris.

Şeýle hem, her basylyşda düwäniň teksti üýtgänini üpjün edeliň:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		ady: <span>{name}</span>
		bahasy: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'ýatda sakla': 'redaktirle'}
		</button>
	</div>;
}

Indi redaktirleme režiminde maglumatly girişleriň, ýönekeý režimde bolsa span-laryň bolmagyny üpjün edeliň:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		ady: {isEdit ? <input value={name} /> : <span>{name}</span>}
		bahasy: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'ýatda sakla': 'redaktirle'}
		</button>
	</div>;
}

Girişlerimize onChange wakasyny birikdirip, ol ýerde ene funksiýa editProd çagyralyň:

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		ady: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		bahasy: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'ýatda sakla': 'redaktirle'}
		</button>
	</div>;
}

Products komponenti

Indi Products komponentine geçeliň. Onda toggleMode funksiýasyny amala aşyralyň:

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

Şeýle hem onda editProd funksiýasyny amala aşyralyň:

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

Önüm tegi bilen, atributlar arkaly bize toggleMode we editProd funksiýalarymyzy geçirip bereýliň:

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 komponentiniň soňky kody aşakdaky ýaly bolar:

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

Amaly işler

Öňki sapaklarda düzülen Users we User komponentleri bilen şuňa meňzeş amallary ýerine ýetiriň.