Werken met radio in React

Werken met radio radio verschilt enigszins, bijvoorbeeld, van dezelfde checkboxes. Het probleem is dat meerdere radio's dezelfde state zullen hebben, maar verschillende value.

Daarom werkt het op de volgende manier: elke radioknop krijgt in het attribuut value zijn eigen waarde geschreven, en in het attribuut checked - een speciale voorwaarde die controleert, of de state gelijk is aan een bepaalde waarde. Als het gelijk is - wordt de radioknop aangevinkt, en als het niet gelijk is - wordt het niet aangevinkt.

Hier is de implementatie van het beschrevene:

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

Er zijn 3 radioknoppen. Er is een alinea. Zorg ervoor dat de waarde van de geselecteerde radioknop in deze alinea wordt weergegeven.

Vraag de gebruiker met behulp van radioknoppen naar zijn favoriete programmeertaal. Geef zijn keuze weer in een alinea. Als de taal JavaScript is gekozen, prijs dan de gebruiker.