React-da Inputlarla Is

React-da inputlarla is state-ler vasitesiyle aparilir. Her bir inputa oz value deyerini ehtiva eden state teyin olunur.

Gelin bir nümune ile yaxindan tanis olaq. Tutaq ki, bizim bir inputumuz var:

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

Tutaq ki, bizim hemcinin bir state-imiz var:

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

Gelin inputun value atributuna state-imizi baglayaq:

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

Bu halda alinir ki, state deyisdikde, inputun metni reaktiv sekilde deyisecek.

Lakin bu, maragli bir yan tesir yaradir: indi brauzerde kodu ise saldiqda inputun metnini deyismek mümkün deyil! Sebebi: çünki inputa mətn daxil edildikde value state-i deyismir, ona uygun olaraq da inputun metni deyismemelidir.

Ozu nezaret edin. Kodumu kopyalayin ve ozunuzde ise salin. Inputun metnini deyismeye calisin - hec nə alinmayacaq. Brauzerin konsolunu achin - orada React-in xəbərdarlığını goreceksiniz. Bu xəbərdarlıq bizə bildirir ki, inputu state-e baglamisiq, lakin bununla da inputu bloklamisiq.

Gelin edek ki, inputumuza mətn daxil etmek mümkün olsun. Bunun üçün etmeliyik ki, daxil etme zamanı state-imiz inputun cari deyerine deyissin.

Bunun üçün evvelce inputa onChange hadisesini elave etmeliyik:

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

Bu hadise React-da saf JS-le müqayisede ferqli davranir. React-da o input deyisende derhal ise dusur. Yeni simvol daxil edende ve ya silende.

Gelin indi hadisemizin işleyicisini elave edek:

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

Bu işleyicide inputun cari mətnini oxumali ve setValue funksiyasi vasitesile onu state-e teyin etmeliyik.

Problem ondadir ki, bu funksiyanin this-i bizim inputumuza isare etmeyecek - bu React-in xüsusiyyetidir. Hadisenin bas verdiyi elementi almaq üçün biz event.target istifade etmeliyik:

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

event.target vasitesile inputun cari mətnini çap edek:

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

Indi ise inputun mətnini state-imize yazaq:

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

Indi biz inputa mətn daxil ede bileceyik. Eyni zamanda value state-i her zaman inputun cari mətnini ehtiva edecek.

Biz buna asanlıqla emin ola bilerik. Mətnimizin məzmununu abzasda çap edek. Bu halda inputa mətn daxil edildikde daxil edilen mətn avtomatik olaraq abzasda peyda olacaq:

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

Bunu daha yığcam variantla, anonim ox funksiyası ile yaza bilerik:

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

Beləlikle, istənilən inputla iş üçün bizə aşağıdakılar lazımdır: bu input üçün state yaratmaq, state-i inputun value atributuna baglamaq, inputa onChange hadisesini elave etmek, hadisenin işleyicisinde inputun state-ini onun mətnine deyişmek.

Bu əməliyyatları her bir inputla aparmaq lazımdır. Yəni, əgər iki inputunuz varsa, iki state-iniz ve iki onChange hadise işleyici funksiyanız olacaq.

Iki input düzeldin. Birinci inputun mətni birinci abzasa, ikinci inputun mətni isə ikinci abzasa çap olunsun.