React'те радио менен иштөө

radio radio менен иштөө бир аз айырмаланып турат, мисалы, ошол эле чекбокстордон. Маселе мында, бир нече радио үчүн бир эле стейт болот, бирок ар түрдүү value.

Ошондуктан иш төмөнкүдөй жүргүзүлөт: ар бир радио баскычтын value атрибутуна өзүнүн мааниси жазылат, ал эми checked атрибутуна - стейт белгилүү бир мааниге барабарбы же жокпу текшерген атайын шарт. Эгерде барабар болсо - радио баскыч белгиленет, ал эми барабар болбосо - белгиленбей калат.

Силерге төмөндө сүрөттөлгөн нерсенин ишке ашырылышы:

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 радио баскыч берилди. Абзац берилди. Жагымдуу кылыңыз, ошондо тандалган радио баскычтын мааниси ушул абзацта көрсөтүлөт.

Радио баскычтардын жардамы менен колдонуучудан анын сүйүктүү программалоо тилин сураңыз. Анын тандоосун абзацта көрсөтүңүз. Эгерде JavaScript тили тандалса, колдонуучуну мактоо созун айтыңыз.