React-ի ժառանգ կոմպոնենտների ստեյթների միջոցով աշխատանքի ռեժիմներ

Ենթադրենք, մեր արտադրանքների զանգվածը այժմ ունի հետևյալ տեսքը՝

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

Եկեք արտադրանքները ցուցադրենք HTML աղյուսակի տեսքով: Ընդ որում, եկեք այնպես անենք, որ աղյուսակի ցանկացած բջիջի վրա կտտացնելիս այդ բջիջում հայտնվի ինպուտ խմբագրման համար: Խնդիրը լուծելու համար կստեղծենք 3 կոմպոնենտ:

Products կոմպոնենտը կպահի ստեյթը արտադրանքների հետ և կօգտագործի Product կոմպոնենտները արտադրանքները ցուցադրելու համար: Product կոմպոնենտը իր հերթին նաև կօգտագործի ProductField կոմպոնենտները արտադրանքի կոնկրետ դաշտը ցուցադրելու համար (անվանում, գին, կատեգորիա):

ProductField կոմպոնենտը կցուցադրի կամ դաշտի տեքստը, կամ էլ դրա խմբագրման համար նախատեսված ինպուտը: Ընդ որում, թող խմբագրման ռեժիմը կամ ցուցադրման ռեժիմը կարգավորվի այս կոմպոնենտի սեփական ստեյթով:

Այսինքն՝ մենք ռեժիմը չենք պահելու ծնողական ստեյթում: Այնտեղ դա շատ անհարմար կլիներ, քանի որ մեզ պետք կլիներ նշել ռեժիմը արտադրանքի յուրաքանչյուր դաշտի համար, ինչը մեր ստեյթը կվերածեր մոտավորապես հետևյալի՝

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

Սակայն մենք այդպիսի ստեյթ չենք պատրաստի, այլ կթողնենք այն, որը եղել է: Պարզապես ProductField կոմպոնենտի յուրաքանչյուր օրինակ իր ստեյթի միջոցով կկարգավորի ռեժիմը՝ խմբագրում կամ ցուցադրում:

Այսպիսով կստացվի, որ ծնողական կոմպոնենտը կպահի տվյալների ստեյթը, իսկ մեր թոռան տեղի կոմպոնենտը կստանա այդ տվյալները պրոպսերի միջոցով և ընդ որում կունենա սեփական ստեյթ՝ իր ռեժիմը փոխելու համար:

Այսպիսով, եկեք իրականացնենք նկարագրվածը:

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

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

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

Գործնական առաջադրանքներ

Կատարեք նմանատիպ գործողություններ Users և User կոմպոնենտների հետ, որոնք դուք ստեղծել եք նախորդ դասերում: