Работа з інпутамі ў 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.

Зрабіце два інпуты. Хай тэкст першага інпута выводзіцца ў першы абзац, а тэкст другога інпута - у другі абзац.