Arbeid med radio i React

Arbeid med radio radio skiller seg noe ut, for eksempel, fra de samme checkboksene. Problemet er at flere radioer vil ha samme state, men forskjellige value.

Derfor fungerer arbeidet på følgende måte: hver radioknapp i attributtet value skriver sin egen verdi, og i attributtet checked - en spesiell betingelse som sjekker, om staten er lik en bestemt verdi. Hvis lik - vil radioknappen bli markert, og hvis ikke lik - vil være umerket.

Her er implementeringen av 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>
}

Det er gitt 3 radioknapper. Det er gitt et avsnitt. Gjør så verdien av den valgte radioknappen blir vist i dette avsnittet.

Med hjelp av radioknapper, spør brukeren hans favoritt programmeringsspråk. Vis hans valg i et avsnitt. Hvis språket JavaScript er valgt, ros brukeren.