Működési módok az utód komponensek állapotain keresztül a Reactban

Tegyük fel, hogy a termékeink tömbje most így néz ki:

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

Jelenítsük meg ezeket a termékeket HTML táblázat formájában. Ugyanakkor tegyük úgy, hogy a táblázat bármely cellájára kattintva egy szerkesztésre szolgáló input jelenjen meg abban a cellában. A feladat megoldásához készítünk 3 komponenst.

A Products komponens tárolja a termékek állapotát és a Product komponenseket használja a termékek megjelenítésére. A Product komponens viszont szintén ProductField komponenseket fog használni a termék egy adott mezőjének (név, ár, kategória) megjelenítésére.

A ProductField komponens vagy a mező szövegét jeleníti meg, vagy egy inputot annak szerkesztéséhez. Ugyanakkor a szerkesztési vagy megjelenítési módot ennek a komponensnek az állapota szabályozza.

Vagyis nem fogjuk a módot a szülő állapotában tárolni. Az nagyon kényelmetlen lenne, mivel minden egyes termékmezőhöz meg kellene adnunk a módot, ami az állapotunkat valami ilyessé változtatná:

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

Mi azonban nem fogunk ilyen állapotot készíteni, hanem meghagyjuk azt, ami volt. Egyszerűen minden egyes ProductField komponens példány a saját állapotával fogja szabályozni a módot: vagy szerkesztés, vagy megjelenítés.

Így az lesz, hogy a szülő komponens tárolja az adatokkal rendelkező állapotot, az unoka komponensünk pedig megkapja ezeket az adatokat a prop-okon keresztül, és ugyanakkor rendelkezni fog saját állapottal a saját módja megváltoztatásához.

Nos, valósítsuk meg a leírtakat.

Products komponens

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

Product komponens

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

ProductField komponens

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

Gyakorlati feladatok

Végezzen el hasonló műveleteket a Users és User komponensekkel, amelyeket az előző leckékben készített.