React-da Inputlar bilen işlemek

React-da inputlar bilen işlemek state-ler arkaly amala aşyrylýar. Her inputa özüniň value -ny saklaýan state bellenilýär.

Geliň mysal üçin seredeliň. Bizde input bolsun:

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

Şeýle hem bizde state bolsun:

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

Geliň inputyň value atly aýratynlygyna state baglaýalyň:

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

Şeýle ýagdaýda, state üýtgedilende, inputdaky tekst hem reaktiw üýtgeýär.

Emma bu gyzykly ýan tesiri hem ýüze çykarýar: indi brauzerde kody işledeniňizde, inputda tekst üýtgetmek mümkin däl! Näme üçin: sebäbi inputa tekst ýazylanyňyzda value state-i üýtgemeýär, şonuň üçin hem inputdaky tekst üýtgemeli däl.

Öziňiz synaň. Kody göçürip alyň we özüňizde işlediň. Inputda tekst üýtgetmäge synanyşyň - hiç zat bolmaz. Brauzeriň konsolyny açyň - ol ýerde React-yň duýduryşyny görersiňiz. Bu duýduryş bize state-i inputa baglap, şol bir wagtyň özünde inputy blokladymyzy görkezýär.

Geliň, bizim inputa tekst ýazmak mümkin bolşy ýaly edeliň. Munuň üçin tekstiň ýazylmagy bilen bize state-i inputyň häzirki bahasy bilen üýtgetmeli.

Başlangyç üçin, inputa onChange wakasyny ýüklemeli:

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

React-da bu waka arassa JS-den başgaça hereket edýär. React-da ol input üýtgeniň ýaly hem ýüze çykýar. Ýagni sim bolsa ýazylanda ýa-da aýrylanda.

Geliň indi waka işleýjimizi goşalyň:

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

Bu işleýjide biz inputyň häzirki tekstini okamaly we ony setValue funksiýasy arkaly state-e bellemeli.

Mesele şonda ýaýranýar, bu funksiýanyň this biziň inputymyza görkezmeýär - bu React-yň aýratynlygy. Waka bolan elementi almak üçin biz event.target ulanmaly:

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

event.target arkaly inputyň häzirki tekstini çykaryň:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // inputyň häzirki teksti
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Indi bolsa input tekstini biziň state-ä ýazalyň:

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 tekst ýaza bileris. Şol bir wagtda value state-i her wagt inputyň häzirki tekstini saklar.

Biz munuň üstüne aňsatlyk bilen ynanyp bileris. Tekstimiziň mazmunyny abzaç içinde çykaryň. Şeýle ýagdaýda, inputa tekst ýazylanyňyzda, ýazylyş teksti abzaçda awtomatiki ýüze çykar:

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

Anonim ok funksiýasy bilen has gysga wariantda ýaza bileris:

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

Şeýlelikde, islendik input bilen işlemek üçin bize aşakdakylar gerek: bu input üçin state döretmek, state-i inputyň value aýratynlygyna baglamak, inputa onChange wakasyny ýüklemek, waka işleýjisinde inputyň state-i onuň teksti bilen üýtgetmek.

Bu amallar her input bilen ýerine ýetirilmeli. Ýagni, eger siziň iki inputyňyz bolsa, onda siziň iki state-iňiz we iki onChange waka işleýji funksiýaňyz bolmaly.

Iki input ýasakyň. Birinji inputyň teksti birinji abzaçda, ikinji inputyň teksti bolsa ikinji abzaçda çyksyn.