Режимҳои кор бо истифода аз стейтҳои компонентҳои фарзанд дар 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, ки шумо дар дарсҳои гузашта сохта будед, анҷом диҳед.