React-та radio-мен жұмыс істеу

radio radio-мен жұмыс істеу біршама ерекшеленеді, мысалы, сол checkbox-тармен салыстырғанда. Мәселе мынада, bірнеше radio-ның бірдей стейті болады, бірақ әртүрлі value.

Сондықтан жұмыс келесідей жүреді: әрбір radio-батырмасына value атрибутына өз мәнін жазады, ал checked атрибутына - стейт белгілі бір мәнге тең екенін тексеретін арнайы шарт орналастырады. Егер тең болса - radio-батырмасы белгіленген болады, ал егер тең болмаса - белгіленбейді.

Міне, сипатталғанның жүзеге асырылуы:

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

3 radio-батырмасы берілген. Абзац берілген. Таңдалған radio-батырмасының мәні осы абзацта шығарылатындай етіңіз.

Radio-батырмаларының көмегімен пайдаланушыдан оның сүйікті бағдарламалау тілін сұраңыз. Оның таңдауын абзацта шығарыңыз. Егер JavaScript тілі таңдалса, пайдаланушыны мақтаңыз.