Mënyrat e punës përmes state-ve të komponentëve të pasardhës në React

Le të supozojmë se grupi ynë i produkteve tani duket kështu:

const initProds = [
	{id: id(), name: 'prod1', cost: 'cost1', catg: 'catg1'},
	{id: id(), name: 'prod2', cost: 'cost2', catg: 'catg2'},
	{id: id(), name: 'prod3', cost: 'cost3', catg: 'catg3'},
];

Le t'i shfaqim këto produkte në formë tabele HTML. Në të njëjtën kohë, le të bëjmë që me klikim në çdo qelizë të tabelës, në atë qelizë të shfaqet një input për editim. Për zgjidhjen e problemit do të krijojmë 3 komponentë.

Komponenti Products do të ruajë state-in me produkte dhe do të përdorë komponentët Product për shfaqjen e produkteve. Komponenti Product nga ana tjetër do të përdorë gjithashtu komponentët ProductField për shfaqjen e një fushe të caktuar të produktit (emri, çmimi, kategoria).

Komponenti ProductField do të shfaqë ose tekstin e fushës, ose një input për editimin e saj. Në këtë rast, mënyra e editimit ose shfaqjes le të rregullohet nga state-i i këtij komponenti.

Kjo do të thotë se ne nuk do ta ruajmë mënyrën në state-in prind. Këtu do të ishte shumë e papërshtatshme, pasi do të na duhej të specifikonim mënyrën për çdo fushë produkti, e cila do ta kthente state-in tonë në diçka të tillë:

const initProds = [
	[
		{field: 'name', value: 'prod1', isEdit: false},
		{field: 'cost', value: 'cost1', isEdit: false},
		{field: 'catg', value: 'catg1', isEdit: false},
	],
	[
		{field: 'name', value: 'prod2', isEdit: false},
		{field: 'cost', value: 'cost2', isEdit: false},
		{field: 'catg', value: 'catg2', isEdit: false},
	],
	[
		{field: 'name', value: 'prod3', isEdit: false},
		{field: 'cost', value: 'cost3', isEdit: false},
		{field: 'catg', value: 'catg3', isEdit: false},
	],
]

Megjithatë, ne nuk do të krijojmë një state të tillë, por do ta lëmë atë që ishte. Thjesht çdo instancë e komponentit ProductField me anë të state-it të vet do të rregullojë mënyrën: ose editim ose shfaqje.

Kështu do të ndodhë që komponenti prind do të ruajë state-in me të dhëna, ndërsa komponenti i pasardhës do t'i marrë këto të dhëna përmes props-ve dhe në të njëjtën kohë do të ketë state-in e vet për ndryshimin e mënyrës së vet.

Pra, le të implementojmë atë që u përshkrua.

Komponenti Products

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function changeField(id, field, event) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod[field] = event.target.value;
			}
			
			return prod;
		}));
	}
	
	const rows = prods.map(prod => {
		return <Product
			key ={prod.id}
			id  ={prod.id}
			name={prod.name}
			cost={prod.cost}
			catg={prod.catg}
			changeField={changeField}
		/>;
	});
	
	return <div>
		<table>
			<tbody>
				{rows}
			</tbody>
		</table>
	</div>;
}

Komponenti Product

function Product({ id, name, cost, catg, changeField }) {
	return <tr>
		<ProductField id={id} text={name} type="name" changeField={changeField} />
		<ProductField id={id} text={cost} type="cost" changeField={changeField} />
		<ProductField id={id} text={catg} type="catg" changeField={changeField} />
	</tr>;
}

Komponenti ProductField

function ProductField({ id, text, type, changeField }) {
	const [isEdit, setIsEdit] = useState(false);
	
	return <td>
		{
			isEdit
			? <input
				value={text}
				onChange={event => changeField(id, type, event)}
				onBlur={() => setIsEdit(false)}
			/>
			: <span onClick={() => setIsEdit(true)}>{text}</span>
		}
	</td>;
}

Detyra praktike

Kryeni operacione të ngjashme me komponentët Users dhe User, të krijuar nga ju në mësimet e mëparshme.