Коркарди инпутҳо дар React

Коркарди инпутҳо дар React бо истифода аз стейтҳо сурат мегирад. Ба ҳар як инпут стейти хос таъин карда мешавад, ки value-и инпутро дар бар мегирад.

Биёед ба мисол назарем. Фарз мекунем, ки мо як инпут дорем:

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

Фарз мекунем, ки инчунин мо як стейт дорем:

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

Биёед ба attribute-и value-и инпут стейти худро замима кунем:

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

Дар ин ҳолат, натиҷа ин аст, ки дар вақти тағйир ёфтани стейт, матни инпут низ реактивӣ тағйир хоҳад ёфт.

Аммо ин паёмдиҳи ҷолибе медиҳад: ҳоло дар вақти кор кардани код дар браузер дар инпут имкони тағйир додани матн вуҷуд надорад! Сабаб: чунки дар вақти ворид кардани матн ба инпут стейти value тағйир намеёбад, ҳамин тариқ, ва матн дар инпут низ набояд тағйир ёбад.

Худатон санҷед. Коди манро нусхабардорӣ кунед ва дар назди худ кор кунед. Кӯшиш кунед матнро дар инпут тағйир диҳед - шумо ҳеҷ чиз нахоҳед кард. Консоли браузерро кушоед - шумо дар он огоҳии React-ро хоҳед дид. Ин огоҳӣ ба мо нишон медиҳад, ки мо стейтро ба инпут замима кардем, аммо бо ин роҳ инпутро бастаем.

Биёед чунке кунем, ки ба инпути мо имкон диҳад матн ворид карда шавад. Барои ин лозим аст, ки чунке созем, ки дар вақти ворид кардан стейти мо ба арзиши ҷорӣ-и инпут тағйир ёбад.

Барои оғоз барои ин лозим аст, ки ба инпут воқеаи onChange-ро овезон кунем:

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

Ин воқеа дар React ба таври дигар рафтор мекунад ба нисбати JS-и холис. Дар React он дар ҳамон лаҳзаи тағйири инпут кор мекунад. Яъне дар вақти ворид ё ҳазви рамз.

Акнун биёед коркунаки воқеаи худро илова кунем:

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

Дар ин коркунак мо бояд матни ҷории инпутро хонем ва онро ба стейт бо истифода аз функсияи setValue таъин кунем.

Мушкилӣ ин аст, ки this-и ин функсия ба инпути мо ишора нахоҳад кард - ин хосияти React аст. Барои даст ёфтани элемент, ки дар он воқеа рух додааст, мо бояд аз event.target истифода кунем:

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

Бо истифода аз event.target матни ҷории инпутро чоп кунем:

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

Ва ҳоло матни инпутро ба стейти худ нависем:

function App() {
	const [value, setValue] = useState('матн');
	
	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>матн: {value}</p>
	</div>;
}

Метавонем бо варианти хурдтару фосилавӣ бо функсияи номаълуми тирӣ нависем:

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

Ҳамин тариқ, барои кор кардани ҳар гуна инпути мо ба чизҳои зерин ниёз дорем: стейт барои ин инпут эҷод кунем, стейтро ба attribute-и value инпут замима кунем, ба инпут воқеаи onChange овезон кунем, дар коркунаки воқеа стейти инпутро ба матни он тағйир диҳем.

Ин амалиётҳо бо ҳар як инпут анҷом дода мешаванд. Яъне, агар шумо ду инпут дошта бошед, пас шумо ду стейт ва ду функсия-коркунаки воқеаи onChange хоҳед дошт.

Ду инпут созед. Бигзор матни якуми инпут дар абзаци якум чоп шавад, ва матни инпути дуюм - дар абзаци дуюм.