React komponentleriniň döwürleri arkaly işlemek režimleri

Indi bizim önümlerimiziň sanawy şeýle 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'},
];

Geliň bu önümleri HTML tablisasy görnüşinde çykaryş. Şol bir wagtyň özünde, tablisanyň haýsy-da bir öýjügine basylsa, şol öýjükde üýtgetmek üçin input peýda bolýan edil. Meseleni çözmek üçin biz 3 sany komponent ýasaýarys.

Products komponenti önümler bilen döwri saklar we önümleri çykarmak üçin Product komponentlerini ulanar. Product komponenti bolsa, öz gezeginde, önümiň belli bir meýdanyny (ady, bahasy, kategoriýasy) çykarmak üçin ProductField komponentlerini ulanar.

ProductField komponenti ýa meýdanyň tekstini görkezer, ýa-da ony üýtgetmek üçin input görkezer. Şol bir wagtyň özünde redaktirlemek ýa-da görkezmek režimi bu komponentiň döwri tarapyndan dolandyrylsyn.

Ýagni, biz režimi ata-enäniň döwründe saklamaýarys. Ol ýerde bu örän irdenmeli bolar, sebäbi her bir önüm meýdany üçin režimi görkezmeli bolardyk, bu bolsa bizim döwrümizi şuňa meňzeş bir zada öwrerdi:

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

Emma, biz şeýle döwur etmeýäris, eýsem, bolanyny saklaris. Diňe her bir ProductField komponentiniň nusgasy öz döwri arkaly režimi dolandyrar: ýa redaktirleme, ýa-da görkezme.

Şeýlelikde, ata-enä komponent maglumatlar bilen döwri saklar, bizim nebere komponentimiz bolsa bu maglumatlary propslar arkaly alar we şol bir wagtyň özünde öz režimini üýtgetmek üçin öz döwrüne eýe bolar.

Onda, geliň beýan edileni amala aşyralyň.

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

Amaly wezipeler

Users we User komponentleri bilen şuňa meňzeş amallary öňki sapaklarda ýasan ýaly ediň.