React'ta Input'larla Çalışma

React'ta input'larla çalışma state'ler kullanılarak yapılır. Her input'a, içinde input'un value değerini tutan kendi state'i atanır.

Bir örnek üzerinden inceleyelim. Diyelim ki bir inputumuz var:

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

Diyelim ki ayrıca bir state'imiz var:

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

Input'un value özniteliğine state'imizi bağlayalım:

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

Bu durumda, state değiştiğinde, input'un metni de tepkimeli (reactive) olarak değişecektir.

Ancak bu, ilginç bir yan etkiye yol açar: artık kodu tarayıcıda çalıştırdığınızda input'ta metni değiştirmek imkansızdır! Nedeni: çünkü input'a metin girildiğinde value state'i değişmez, dolayısıyla input'taki metin de değişmemelidir.

Kendiniz deneyin. Kodumu kopyalayın ve kendiniz çalıştırın. Input'taki metni değiştirmeye çalışın - hiçbir şey yapamayacaksınız. Tarayıcı konsolunu açın - React'ın bir uyarısını göreceksiniz. Bu uyarı, state'i input'a bağladığımızı ancak bunu yaparak input'u kilitlemiş olduğumuzu belirtir.

Input'umuza metin girebilmemiz için şunu yapalım: input'un değeri değiştiğinde state'imizin input'un mevcut değerine göre güncellenmesini sağlayalım.

Bunun için öncelikle input'a onChange olayını (event) eklemeliyiz:

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

Bu olay React'ta saf JS'ye kıyasla farklı davranır. React'ta input değişir değişmez tetiklenir. Yani bir karakter girildiğinde veya silindiğinde.

Şimdi olay işleyicimizi (event handler) ekleyelim:

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

Bu işleyicide, input'un mevcut metnini okumalı ve setValue fonksiyonu ile state'e ayarlamalıyız.

Sorun şu ki, bu fonksiyonun this'i bizim input'umuzu göstermeyecek - bu React'ın bir özelliğidir. Olayın gerçekleştiği elementi elde etmek için event.target'ı kullanmamız gerekir:

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

event.target ile input'un mevcut metnini yazdıralım:

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

Şimdi input'un metnini state'imize yazalım:

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

Artık input'a metin girebileceğiz. Bu sayede value state'i her zaman input'un mevcut metnini içerecek.

Bunu kolayca doğrulayabiliriz. State'imizin içeriğini bir paragrafa yazdıralım. Bu durumda input'a metin girildiğinde, girilen metin paragrafta otomatik olarak görünecek:

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

Daha kısa bir versiyona, anonim ok fonksiyonu ile yazabiliriz:

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

Böylece, herhangi bir input'un çalışması için şunlara ihtiyacımız var: bu input için bir state oluşturmak, state'i input'un value özniteliğine bağlamak, input'a onChange olayını eklemek, olay işleyicisinde input'un state'ini onun metni ile değiştirmek.

Bu işlemleri her input ile yapmanız gerekecek. Yani, eğer iki input'unuz varsa, iki state'iniz ve iki onChange olay işleyici fonksiyonunuz olacak.

İki input yapın. İlk input'un metni ilk paragrafta, ikinci input'un metni ise ikinci paragrafta görünsün.