Tėvinio komponento būsenos redagavimas vaikiniame komponente React

Dabar redaguokime savo produktus naudodami įvesties laukus. Tam vaikiniame komponente sukurkime mygtuką.

Paspaudus pirmą kartą šį mygtuką, vietoj pavadinimo ir kainos su produktu tegul atsiranda įvesties laukai jų redagavimui, o paspaudus antrą kartą vietoj įvesties laukų vėl atsiranda tekstai.

Atlikime pakeitimą produktų masyve, pridėdami savybę isEdit (o darbą su krepšeliu dėl paprastumo pašalinkime):

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

Komponentas Product

Produkte sukurkime redagavimo mygtuką:

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

Padarykime taip, kad paspaudus šį mygtuką būtų iškviesta kokia nors funkcija toggleMode, perduota iš tėvinio komponento:

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

Kol kas neturime toggleMode realizacijos, bet žinome, kad ji bus talpinama tėviniame komponente, parametru priims produkto id ir pakeis savybę isEdit produkto į priešingą.

Taip pat padarykime, kad mygtuko tekstas keistųsi kiekvienu paspaudimu:

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

Dabar padarykime taip, kad redagavimo režime mūsų turėtų būti įvesties laukai su duomenimis, o įprastame režime - span elementai:

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

Priskirkime mūsų įvesties laukams įvykį onChange, kuriame iškviessime kažkokią tėvinę funkciją 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>;
}

Komponentas Products

Dabar pereikime į komponentą Products. Jame realizuokime funkciją toggleMode:

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

Taip pat jame realizuokime funkciją editProd:

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

Į produkto tagą atributais perduokime mūsų funkcijas toggleMode ir 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}
	/>;
});

Galutinis komponento Products kodas gausis toks:

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

Praktinės užduotys

Atlikite analogiškus veiksmus su komponentais Users ir User, kuriuos sukūrėte ankstesnėse pamokose.