რეაქტიულობა სტეიტების React-ში

ახლა ვნახოთ, როგორ მუშაობს რეაქტიულობა. ის ხდის, რომ სტეიტის ცვლილებისას ცვლილებები მყისიერად აისახება ეკრანზე.

ვნახოთ მაგალითზე. დავუშვათ, გვაქვს სტეიტი პროდუქტის სახელით:

const [name, setName] = useState('prod');

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

return <div>
	<span>{name}</span>
</div>;

ახლა შევქმნათ ღილაკი, რომლის დაჭერისას ჩვენი სტეიტი შეიცვლება:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

კლიკის დამმუშავებლ中 გამოვიყენოთ ფუნქცია setName, რომ დავაყენოთ პროდუქტის ახალი სახელი:

function clickHandler() {
	setName('xxxx');
}

მოდით მთელი ჩვენი კოდი ერთად ავაწყოთ. გამოვა, რომ ღილაკზე დაჭერისას ტექსტი მყისიერად შეიცვლება ახალ მნიშვნელობაზე:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

ცალკეული ფუნქციები-დამმუშავებლების გამოყენება არ არის სავალდებულო. შეგიძლიათ გამოიყენოთ ანონიმური ისრის ფუნქცია:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

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