Kufanya Kazi na Viingilio kwenye React

Kufanya kazi na viingilio katika React hufanyika kwa kutumia hali (states). Kila kiingilio hupewa hali yake inayobeba value ya kiingilio.

Hebu tuangalie kwa mfano. Tuseme tuna kiingilio:

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

Tuseme pia tuna hali (state):

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

Hebu tuunganishe hali yetu kwa sifa value ya kiingilio:

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

Katika kesi hii, itatokea kwamba mabadiliko yoyote katika hali, yatabadilisha maandishi ya kiingilio kwa nguvu (reactively).

Hata hivyo, hii inaleta athari ya kuvutia: sasa ukizindua msimbo kwenye kivinjari, haiwezekani kubadilisha maandishi kwenye kiingilio! Kwa nini: kwa sababu unapoandika maandishi kwenye kiingilio haibadilishi hali value, ipasavyo, maandishi kwenye kiingilio hayapaswi kubadilika.

Jaribu mwenyewe. Nakili msimbo wangu na uianzishe kwenye mfumo wako. Jaribu kubadilisha maandishi kwenye kiingilio - hutafanikiwa. Fungua konsole ya kivinjari - utaona onyo ndani yake kutoka kwa React. Onyo hili linatuonyesha kwamba tumeunganisha hali kwa kiingilio, lakini kwa kufanya hivyo tumezuia kiingilio.

Hebu tufanye ili iwezekanavyo kuandika maandishi kwenye kiingilio chetu. Kwa hili inahitajika kufanya ili wakati wa kuandika hali yetu ibadilike kwa thamani ya sasa ya kiingilio.

Kuanza, kwa hili inahitajika kuweka kwenye kiingilio tukio onChange:

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

Tukio hili katika React linatenda kwa njia tofauti ikilinganishwa na JS safi. Katika React linafanya kazi mara moja kwa mabadiliko yoyote ya kiingilio. Hiyo ni wakati wa kuandika au kufuta herufi.

Hebu sasa tuongeze kichakuzi (handler) cha tukio letu:

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

Katika kichakuzi hiki tunapaswa kusoma maandishi ya sasa ya kiingilio na kuiweka kwenye hali kwa kutumia kitendo setValue.

Shida ni kwamba this cha kitendo hiki hakitaelekeza kwenye kiingilio chetu - hii ni sifa ya React. Ili kupata kipengele (element) ambapo tukio limetokea, inatubidi tumie event.target:

function App() {
	const [value, setValue] = useState('maandishi');
	
	function handleChange(event) {
		console.log(event.target); // kiunga cha kipengele cha DOM cha kiingilio
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Hebu tutoe maandishi ya sasa ya kiingilio kwa kutumia event.target:

function App() {
	const [value, setValue] = useState('maandishi');
	
	function handleChange(event) {
		console.log(event.target.value); // maandishi ya sasa ya kiingilio
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Na sasa tuandike maandishi ya kiingilio kwenye hali yetu:

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

Sasa tunaweza kuandika maandishi kwenye kiingilio. Wakati huo hali value itakuwa na maandishi ya sasa ya kiingilio kila wakati.

Tunaweza kuhakikisha kwa urahisi kwa hili. Hebu tuonyeshe yaliyomo ya maandishi yetu kwenye aya. Katika kesi hii unapoandika maandishi kwenye kiingilio maandishi yaliyoandikwa yataonekana kiotomatiki kwenye aya:

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

Tunaweza kuandika upya kwa muundo mfupi zaidi kwa kutumia kitendo kisichojulikana (anonymous) cha mshale:

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

Kwa hivyo, kwa kiingilio chochote kufanya kazi tunahitaji yaftuatayo: kuunda hali (state) kwa hiki kiingilio, kuunganisha hali kwa sifa value ya kiingilio, kuweka tukio onChange kwenye kiingilio, katika kichakuzi (handler) cha tukio kubadilisha hali ya kiingilio kwa maandishi yake.

Shughuli hizi zitahitaji kufanywa kwa kila kiingilio. Hiyo ni, ikiwa una viingilio viwili, basi utakuwa na hali mbili na vitendo viwili-vichakuzi (vye handler) vya tukio onChange.

Fanya viingilio viwili. Maandishi ya kwanza kiingilio yaonekane kwenye aya ya kwanza, na maandishi ya kiingilio cha pili - kwenye aya ya pili.