React-da Alt Komponentlərin State-ləri vasitəsilə İş Rejimləri

Fərz edək ki, bizim məhsul massivimiz indi aşağıdakı kimi görünür:

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

Gəlin bu məhsulları HTML cədvəli şəklində çıxaraq. Bununla yanaşı, elə edək ki, cədvəlin hər hansı bir xanasına kliklənəndə həmin xanada redaktə üçün input meydana çıxsın. Məsələni həll etmək üçün 3 komponent hazırlayaq.

Products komponenti məhsullarla bağlı state-i saxlayacaq və məhsulları çıxarmaq üçün Product komponentlərindən istifadə edəcək. Öz növbəsində Product komponenti də müəyyən bir məhsul sahəsini (ad, qiymət, kateqoriya) çıxarmaq üçün ProductField komponentlərindən istifadə edəcək.

ProductField komponenti ya sahənin mətnini göstərəcək, ya da onu redaktə etmək üçün input. Bununla yanaşı, redaktə və ya göstərmə rejimi həmin komponentin statei tərəfindən tənzimlənir.

Yəni biz rejimi valideyn state-də saxlamayacayıq. Bu, orada çox əlverişsiz olardı, çünki hər bir məhsul sahəsi üçün rejimi göstərməli olardıq, bu da bizim state-imizi təxminən belə bir şeyə çevirərdi:

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

Ancaq biz belə bir state etməyəcəyik, əvvəlki kimi olanı saxlayacayıq. Sadəcə hər bir ProductField komponent nümunəsi öz state-indən istifadə edərək rejimi tənzimləyəcək: ya redaktə, ya da göstərmə.

Beləliklə, nəticədə valideyn komponent məlumatlar ilə state saxlayacaq, bizim nəvə komponent isə bu məlumatları proplar vasitəsilə alacaq və eyni zamanda öz rejimini dəyişdirmək üçün öz state-inə malik olacaq.

Beləliklə, gəlin təsvir olunanları həyata keçirək.

Products Komponenti

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 Komponenti

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 Komponenti

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

Praktik Tapşırıqlar

Əvvəlki dərslərdə yaratdığınız Users və User komponentləri ilə də oxşar əməliyyatları yerinə yetirin.