Arbeta med radio i React

Att arbeta med radio radio skiljer sig något, till exempel, från samma checkboxar. Problemet är att flera radio kommer att ha samma tillstånd, men olika value.

Därför fungerar arbetet på följande sätt: varje radioknapp i attributet value skriver sitt värde, och i attributet checked - ett speciellt villkor som kontrollerar, är tillståndet lika med ett visst värde. Om lika blir radioknappen markerad, och om den inte är lika kommer den inte att vara markerad.

Här är implementationen av det beskrivna:

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 finns 3 radioknappar. Det finns ett stycke. Gör så att värdet på den valda radioknappen visas i detta stycke.

Använd radioknappar för att fråga användaren om hans favoritprogrammeringsspråk. Visa hans val i ett stycke. Om språket JavaScript är valt, beröm användaren.