ინფუთებთან მუშაობა React-ში

ინფუთებთან მუშაობა React-ში ხდება სტეიტების გამოყენებით. თითოეულ ინფუთს ენიჭება საკუთარი სტეიტი, რომელიც შეიცავს ინფუთის value-ს.

მოდით შევხედოთ მაგალითს. დავუშვათ, გვაქვს ინფუთი:

function App() {
	return <div>
		<input />
	</div>;
}

დავუშვათ ასევე, გვაქვს სტეიტი:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

მოდით, ინფუთის value ატრიბუტს მივაბოთ ჩვენი სტეიტი:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

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

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

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

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

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

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

ეს მოვლენა React-ში მუშაობს განსხვავებულად წმინდა JS-თან შედარებით. React-ში ის სრულდება დაუყოვნებლივ ინფუთის შეცვლისთანავე. ანუ სიმბოლოს შეყვანის ან წაშლის დროს.

მოდით ახლა დავამატოთ ჩვენი მოვლენის დამმუშავებელი:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

ამ დამმუშავებელში ჩვენ უნდა წავიკითხოთ მიმდინარე ტექსტი ინფუთის და დავსეტოთ ის სტეიტში setValue ფუნქციის გამოყენებით.

პრობლემა ისაა, რომ ამ ფუნქციის this-ი არ მიუთითებს ჩვენს ინფუთზე - ეს არის React-ის თავისებურება. ელემენტის მისაღებად, რომელშიც მოხდა მოვლენა, ჩვენ უნდა გამოვიყენოთ event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // ლინკი ინფუთის DOM ელემენტზე
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

გამოვიტანოთ event.target-ის საშუალებით მიმდინარე ტექსტი ინფუთის:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // ინფუთის მიმდინარე ტექსტი
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

ახლა კი ჩავწეროთ ინფუთის ტექსტი ჩვენს სტეიტში:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

ახლა ჩვენ შევძლებთ ტექსტის შეყვანას ინფუთში. ამასთან სტეიტი value ყოველთვის შეიცავს ინფუთის მიმდინარე ტექსტს.

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

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

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

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

ამრიგად, ნებისმიერი ინფუთის მუშაობისთვის ჩვენ გვჭირდება შემდეგი: შევქმნათ სტეიტი ამ ინფუთისთვის, მივაბოთ სტეიტი ინფუთის value ატრიბუტს, დავამატოთ onChange მოვლენა ინფუთზე, მოვლენის დამმუშავებელში შევცვალოთ ინფუთის სტეიტი მის ტექსტზე.

ეს ოპერაციები უნდა ჩატარდეს ყოველ ინფუთთან. ანუ, თუ თქვენ გაქვთ ორი ინფუთი, მაშინ თქვენ გექნებათ ორი სტეიტი და ორი დამმუშავებელი ფუნქცია onChange მოვლენისთვის.

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