Arbejde med radio i React

Arbejdet med radio radio adskiller sig noget, for eksempel, fra de samme checkbokse. Problemet er, at flere radioer vil have den samme tilstand, men forskellige value.

Derfor fungerer arbejdet på følgende måde: hver radioknap i attributten value skrives sin egen værdi, og i attributten checked - en speciel betingelse, der kontrollerer, om tilstanden er lig med en bestemt værdi. Hvis lig - bliver radioknappen markeret, og hvis ikke lig - vil den være umarkeret.

Her er implementeringen af det beskrevne:

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

Der er givet 3 radioknapper. Der er givet et afsnit. Gør så værdien af den valgte radioknap bliver vist i dette afsnit.

Spørg brugeren om hans yndlingsprogrammeringssprog ved hjælp af radioknapper. Vis hans valg i et afsnit. Hvis sproget JavaScript er valgt, ros brugeren.