მშობელი კომპონენტის state-ის რედაქტირება შვილ კომპონენტში React-ში

მოდით ახლა ჩვენი პროდუქტები რედაქტირება ინფუთების საშუალებით. ამისთვის შვილ კომპონენტში გავაკეთოთ ღილაკი.

ამ ღილაკზე პირველი დაწკაპუნებისას დაესწაროს სახელისა და ფასის ნაცვლად პროდუქტთან გამოჩნდეს ინფუთები მათი რედაქტირებისთვის, ხოლო მეორე დაწკაპუნებისას ინფუთების ნაცვლად კვლავ გამოჩნდეს ტექსტები.

შევიტანოთ ცვლილება პროდუქტების მასივში, დავამატოთ თვისება isEdit (ხოლო კალათასთან მუშაობა სიმარტივისთვის ამოვიღოთ):

const initProds = [
	{id: id(), name: 'product1', cost: 100, isEdit: false},
	{id: id(), name: 'product2', cost: 200, isEdit: false},
	{id: id(), name: 'product3', cost: 300, isEdit: false},
];

Product კომპონენტი

გავაკეთოთ პროდუქტში რედაქტირების ღილაკი:

function Product({ id, name, cost, isEdit }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		<button>edit</button>
	</div>;
}

გავაკეთოთ ისე, რომ ამ ღილაკზე დაწკაპუნებისას გამოიძახოს რაღაც ფუნქცია toggleMode, რომელიც გადაეცემა მშობელი კომპონენტიდან:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			edit
		</button>
	</div>;
}

ჩვენ ჯერ არ გვაქვს toggleMode-ის იმპლემენტაცია, მაგრამ ვიცით, რომ ის განთავსდება მშობელ კომპონენტში, პარამეტრად მიიღებს id პროდუქტის და შეცვლის თვისებას isEdit პროდუქტის საპირისპიროდ.

ასევე გავაკეთოთ ისე, რომ ღილაკის ტექსტი იცვლებოდეს ყოველ დაწკაპუნებაზე:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

მოდით ახლა გავაკეთოთ ისე, რომ რედაქტირების რეჟიმში გვქონდეს ინფუთები მონაცემებით, ხოლო ჩვეულ რეჟიმში - span-ები:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: {isEdit ? <input value={name} /> : <span>{name}</span>}
		cost: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

მოვახერხოთ ჩვენს ინფუთებს მოვლენა onChange, რომელშიც გამოვიძახებთ რაღაც მშობელ ფუნქციას editProd:

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		name: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		cost: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

Products კომპონენტი

მოდით ახლა გადავიდეთ Products კომპონენტში. რეალიზაცია გავუკეთოთ მასში ფუნქციას toggleMode:

function toggleMode(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.isEdit = !prod.isEdit;
		}
		
		return prod;
	}));
}

ასევე რეალიზაცია გავუკეთოთ მასში ფუნქციას editProd:

function editProd(id, field, event) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod[field] = event.target.value;
		}
		
		return prod;
	}));
}

პროდუქტის თეგში ატრიბუტებად გადავცეთ ჩვენი ფუნქციები toggleMode და editProd:

const items = prods.map(prod => {
	return <Product
		key ={prod.id}
		id  ={prod.id}
		name={prod.name}
		cost={prod.cost}
		isEdit={prod.isEdit}
		toggleMode={toggleMode}
		editProd={editProd}
	/>;
});

Products კომპონენტის საბოლოო კოდი მიიღებს შემდეგ სახეს:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function toggleMode(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.isEdit = !prod.isEdit;
			}
			
			return prod;
		}));
	}
	
	function editProd(id, field, event) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod[field] = event.target.value;
			}
			
			return prod;
		}));
	}
	
	const result = prods.map(prod => {
		return <Product
			key ={prod.id}
			id  ={prod.id}
			name={prod.name}
			cost={prod.cost}
			isEdit={prod.isEdit}
			toggleMode={toggleMode}
			editProd={editProd}
		/>;
	});
	
	return <div>
		{result}
	</div>;
}

პრაქტიკული ამოცანები

გააკეთეთ მსგავსი ოპერაციები კომპონენტებთან Users და User, რომლებიც თქვენ შექმნით წინა გაკვეთილებში.