Рад са уносима у React-у

Рад са уносима у React-у се одвија помоћу стања. Сваком уносу се додељује своје стање, које садржи value уноса.

Погледајмо на примеру. Нека имамо унос:

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

Нека такође имамо стање:

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

Хајде да атрибуту value уноса прикачимо наше стање:

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

У том случају ће се десити да се при промени стања, реактивно мења и текст уноса.

Ово, међутим, даје занимљив споредни ефекат: сада при покретању кода у претраживачу у уносу није могуће променити текст! Зашто: зато што при уносу текста у поље не мења се стање value, па самим тим, ни текст у уносу не би требало да се мења.

Покушајте сами. Копирајте мој код и покрените код код себе. Покушајте да промените текст у уносу - ништа вам неће поћи за руком. Отворите конзолу претраживача - видећете у њој упозорење React-а. То упозорење нам указује да смо прикачили стање на унос, али смо тиме блокирали унос.

Хајде да урадимо тако да у наш унос можемо да уносимо текст. За то је потребно да се уради тако да при уносу текста мења наше стање на тренутну вредност уноса.

За почетак за то треба да се постави на унос догађај onChange:

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

Овај догађај у React-у се понаша другачије у поређењу са чистим JS-ом. У React-у он покреће се одмах по промени уноса. То значи при уносу или брисању знака.

Хајде сада да додамо руковаоца нашег догађаја:

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

У овом руковаоцу треба да прочитамо тренутни текст уноса и да га поставимо у стање помоћу функције setValue.

Проблем је у томе што this ове функције неће указивати на наш унос - таква је особина React-а. Да би добили елемент, у ком се десио догађај, потребно је користити event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // веза на DOM елемент уноса
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Прикажимо помоћу event.target тренутни текст уноса:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // тренутни текст уноса
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

А сада упишимо текст уноса у наше стање:

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

Сада можемо да уносимо текст у поље. При томе стање value увек ће садржати тренутни текст уноса.

Можемо лако да се уверимо у то. Прикажимо садржај нашег текста у параграфу. У том случају при уносу текста у поље унети текст ће аутоматски се појавити у параграфу:

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

Можемо преписати у компактнију варијанту са анонимном стреличастом функцијом:

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

Дакле, за рад било ког уноса нам треба следеће: направити стање за тај унос, прикачити стање на атрибут value уноса, поставити догађај onChange на унос, у руковаоцу догађаја мењати стање уноса на његов текст.

Ове операције ће требати да се обављају са сваким уносом. То значи, ако имате два уноса, онда ћете имати два стања и две функције-руковаоца догађаја onChange.

Направите два уноса. Нека текст првог уноса исписује у први параграф, а текст другог уноса - у други параграф.