Darbība ar radio React

Darbība ar radio radio nedaudz atšķiras, piemēram, no tiem pašiem checkbox. Problēma ir tā, ka vairākiem radio būs viens un tas pats stāvoklis, bet dažādas value.

Tāpēc darbs notiek šādi: katram radio pogai atribūtā value ieraksta savu vērtību, bet atribūtā checked - īpašs nosacījums, kas pārbauda, vai stāvoklis ir vienāds ar noteiktu vērtību. Ja vienāds - radio poga kļūs atzīmēta, bet ja nav vienāds - nebūs atzīmēta.

Šeit ir iepriekš aprakstītā implementācija:

function App() {
	const [value, setValue] = useState(1);
	
	function changeHandler(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input
			type="radio"
			name="radio"
			value="1"
			checked={value === '1' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="2"
			checked={value === '2' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="3"
			checked={value === '3' ? true : false}
			onChange={changeHandler}
		/>
	</div>
}

Dotas 3 radio pogas. Dots rindkopa. Izveidojiet tā, lai atlasītās radio pogas vērtība tiktu izvadīta šajā rindkopā.

Izmantojot radio pogas, jautājiet lietotājam viņa iecienītāko programmēšanas valodu. Izvadiet viņa izvēli rindkopā. Ja izvēlēta valoda JavaScript, apbrīnojiet lietotāju.