Работа со input-и во React

Работата со input-и во React се одвива со помош на state-ови. На секој input му се доделува свој state, кој ја содржи value на input-от.

Да го погледнеме на пример. Да претпоставиме дека имаме еден input:

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

Да претпоставиме дека имаме и state:

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

Да го поврземе нашиот state со атрибутот value на input-от:

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

Во тој случај, ќе се добие дека при промена на state-от, реактивно ќе се промени и текстот на input-от.

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

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

Да направиме така што во нашиот input ќе може да се внесува текст. За тоа треба да се направи така што при внесување ќе се менува нашиот state на тековната вредност на input-от.

За почеток за ова треба на input-от да се додаде настан onChange:

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

Овој настан во React се однесува поинаку споредено со чист JS. Во React тој се активира веднаш по промена на input-от. Тоа значи при внесување или бришење симбол.

Да го додадеме обработувачот на нашиот настан:

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

Во овој обработувач треба да го прочитаме тековниот текст на input-от и да го поставиме во state со помош на функцијата setValue.

Проблемот е што this на оваа функција нема да покажува на нашиот input - таква е особеноста на React. За да го добиеме елементот, во кој се случил настанот, неопходно е да користиме event.target:

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

Да го испечатиме со помош на event.target тековниот текст на input-от:

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

А сега да го запишеме текстот на input-от во нашиот state:

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

Сега ќе можеме да внесуваме текст во input-от. При тоа state-от value секогаш ќе ја содржи тековната вредност на input-от.

Лесно можеме да се увериме во ова. Да го испечатиме содржината на нашиот текст во еден параграф. Во тој случај при внесување текст во input-от, внесениот текст ќе се појавува автоматски во параграфот:

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

Значи, за работа на кој било input нам ни треба следново: да создадеме state за тој input, да го поврземе state-от со атрибутот value на input-от, да додадеме настан onChange на input-от, во обработувачот на настанот да го смениме state-от на input-от на неговиот текст.

Овие операции ќе треба да се извршуваат со секој input. Тоа значи, ако имате два input-и, тогаш ќе имате два state-а и две функции-обработувачи на настанот onChange.

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