Kubadilisha State ya Mzazi katika Komponenți Mtoto katika React

Hebu sasa tubadilishe bidhaa zetu kwa kutumia viingilio. Kwa hili, katika komponenți mtoto tutafanya kifungo.

Kwa kubofya kwanza kwenye kifungo hiki, badala ya jina na bei ya bidhaa, viingilio vya kubadilisha viweze kuonekana, na kwa kubofya mara ya pili badala ya viingilio, maandishi yaonekane tena.

Tutafanya mabadiliko kwenye safu ya bidhaa, tukiongeza sifa isEdit (na kazi ya kikasha tutaiondoa kwa urahisi):

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

Komponenți Product

Tutafanya kifungo cha kubadilisha katika bidhaa:

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

Tutafanya ili kwa kubofya kifungo hiki itakayoitwa baadhi ya kitendakazi toggleMode, iliyopitishwa kutoka kwa komponenți mzazi:

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

Kwa sasa hatuna utekelezaji wa toggleMode, lakini tunajua kuwa itakuwa iko katika komponenți mzazi, ikikubali kigezo id cha bidhaa na kubadilisha sifa isEdit ya bidhaa kwa kinyume.

Tutafanya pia ili maandishi ya kifungo yabadilike kila kubofya:

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

Hebu sasa tufanye ili katika hali ya kubadilisha tuwe na viingilio vilivyo na data, na katika hali ya kawaida - 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>;
}

Tutafunga kwenye viingilio vyetu tukio onChange, ambacho tutaita baadhi ya kitendakazi cha mzazi 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>;
}

Komponenți Products

Hebu sasa tuende kwenye komponenți Products. Tutatekeleza ndani yake kitendakazi toggleMode:

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

Pia tutatekeleza ndani yake kitendakazi editProd:

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

Kwenye kitambulisho cha bidhaa kwa sifa tutapitishe vitendakazi vyetu toggleMode na 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}
	/>;
});

Msimbo wa mwisho wa komponenți Products utakuwa kama ifuatavyo:

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

Kazi za Vitendo

Fanya shughuli sawa na komponenți Users na User, ulizoziumba katika masomo yaliyopita.