Darbas su įvesties laukais React

Darbas su įvesties laukais React vyksta naudojant būsenas. Kiekvienam įvesties laukui priskiriama savo būsena, kurioje yra įvesties lauko value.

Pažiūrėkime pavyzdžiu. Tarkime, kad turime įvesties lauką:

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

Tarkime, kad taip pat turime būseną:

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

Pririškime savo būseną prie įvesties lauko atributo value:

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

Tokiu atveju pasirodys, kad pakeitus būseną, reaktyviai pasikeis ir įvesties lauko tekstas.

Tai, tačiau, suteikia įdomų šalutinį efektą: dabar paleidus kodą naršyklėje, įvesties lauke neįmanoma pakeisti teksto! Kodėl: nes įvedant tekstą į įvesties lauką nekeičiama būsena value, atitinkamai, ir tekstas įvesties lauke neturėtų keistis.

Išbandykite patys. Nukopijuokite mano kodą ir paleiskite pas save. Pabandykite keisti tekstą įvesties lauke - jums nieko nepavyks. Atidarykite naršyklės konsolę - joje pamatysite React įspėjimą. Šis įspėjimas mums nurodo, kad mes pririšome būseną prie įvesties lauko, bet tuo pačiu užblokavome įvesties lauką.

Padarykime taip, kad į mūsų įvesties lauką būtų galima įvesti tekstą. Tam reikia padaryti kad įvedant keistųsi mūsų būsena į dabartinę įvesties lauko reikšmę.

Pirmiausia tam reikia įvesties laukui užkabinti įvykį onChange:

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

Šis įvykis React veikia kitaip palyginti su grynuoju JS. React jis suveikia iškart pasikeitus įvesties laukui. Tai yra kai įvedamas arba ištrinamas simbolis.

Dabar pridėkime mūsų įvykio apdorotoją:

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

Šiame apdorotoje mes turime nuskaityti dabartinį įvesties lauko tekstą ir nustatyti jį į būseną naudojant funkciją setValue.

Problema ta, kad this šios funkcijos nerodys į mūsų įvesties lauką - tai React ypatumas. Kad gautume elementą, kuriame įvyko įvykis, mums reikia naudoti event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // nuoroda į įvesties lauko DOM elementą
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Išveskime naudodami event.target dabartinį įvesties lauko tekstą:

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

O dabar įrašykime įvesties lauko tekstą į mūsų būseną:

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

Dabar galėsime įvesti tekstą į įvesties lauką. Tuo metu būsena value visada turės dabartinį įvesties lauko tekstą.

Mes galime lengvai tuo įsitikinti. Išveskime savo teksto turinį į pastraipą. Tokiu atveju įvedant tekstą į įvesties lauką, įvestas tekstas automatiškai pasirodys pastraipoje:

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

Galime perrašyti į kompaktesnį variantą su anonime rodykline funkcija:

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

Taigi, kad bet kuris įvesties laukas veiktų, mums reikia šių dalykų: sukurti šio įvesties lauko būseną, pririšti būseną prie įvesties lauko atributo value, užkabinti įvykį onChange į įvesties lauką, įvykio apdorotoje keisti įvesties lauko būseną į jo tekstą.

Šias operacjas reikės atlikti su kiekvienu įvesties lauku. Tai yra, jei turite du įvesties laukus, tada turėsite dvi būsenas ir dvi funkcijas-įvykių apdorotojas įvykiui onChange.

Sukurkite du įvesties laukus. Tegul pirmojo įvesties lauko tekstas išvedamas į pirmą pastraipą, o antrojo įvesties lauko tekstas - į antrą pastraipą.