Puna me Input-et në React

Puna me input-et në React bëhet me ndihmën e state-ve. Çdo input i caktohet një state i vet, që përmban value e input-it.

Le të shohim një shembull. Le të themi se kemi një input:

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

Le të themi gjithashtu se kemi një state:

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

Le ta lidhim state-in tonë me atributin value të input-it:

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

Në këtë rast, do të ndodhë që kur state-i ndryshon, teksti i input-it do të ndryshojë në mënyrë reaktive.

Kjo, megjithatë, jep një efekt anësor interesant: tani kur kodi ekzekutohet në shfletues, është e pamundur të ndryshosh tekstin në input! Pse: sepse kur fut tekst në input, state-i value nuk ndryshon, prandaj, as teksti në input nuk duhet të ndryshojë.

Provoni vetë. Kopjoni kodin tim dhe ekzekutojeni te ju. Provoni të ndryshoni tekstin në input - nuk do të keni sukses. Hapni konsolën e shfletuesit - do të shihni një paralajmërim të React. Ky paralajmërim na tregon se kemi lidhur një state me input, por në këtë mënyrë e kemi bllokuar input-in.

Le ta bëjmë të mundur që në input-in tonë të mund të futet tekst. Për këtë duhet të bëhet që gjatë futjes të ndryshohet state-i ynë në vlerën aktuale të input-it.

Për fillim, për këtë duhet t'i caktojmë input-it ngjarjen onChange:

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

Kjo ngjarje në React sillet ndryshe krahasuar me JS-në e pastër. Në React ajo shkaktohet menjëherë me ndryshimin e input-it. Domethënë gjatë futjes ose fshirjes së një karakteri.

Le të shtojmë tani përpunuesin e ngjarjes sonë:

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

Në këtë përpunues duhet të lexojmë tekstin aktual të input-it dhe ta vendosim atë në state me ndihmën e funksionit setValue.

Problemi është se this i këtij funksioni nuk do të tregojë në input-in tonë - kjo është një veçori e React. Për të marrë elementin, ku ka ndodhur ngjarja, ne duhet të përdorim event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // referencë për elementin DOM të input-it
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Le të nxjerrim me event.target tekstin aktual të input-it:

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

Dhe tani le ta shkruajmë tekstin e input-it në state-in tonë:

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

Tani ne do të jemi në gjendje të fusim tekst në input. Për këtë rast, state-i value gjithmonë do të përmbajë tekstin aktual të input-it.

Ne mund ta verifikojmë këtë lehtësisht. Le të nxjerrim përmbajtjen e tekstit tonë në një paragraf. Në këtë rast, kur futet teksti në input, teksti i futur do të shfaqet automatikisht në paragraf:

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

Mund ta rishkruajmë në një variant më kompakt me funksion anonim shigjetor:

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

Kështu, për të punuar me çdo input na duhet në vijim: të krijojmë një state për këtë input, ta lidhim state-in me atributin value të input-it, t'i caktojmë ngjarjen onChange input-it, në përpunuesin e ngjarjes të ndryshojmë state-in e input-it në tekstin e tij.

Këto operacione do të duhet të kryhen me çdo input. Domethënë, nëse keni dy input-e, atëherë do të keni dy state dhe dy funksione-përpunues të ngjarjes onChange.

Krijoni dy input-e. Le të themi se teksti i input-it të parë të paraqitet në paragrafin e parë, dhe teksti i input-it të dytë - në paragrafin e dytë.