Radio-ի հետ աշխատանքը React-ում

radio radio-ի հետ աշխատանքը որոշակիորեն տարբերվում է, օրինակ, նույնիսկ checkbox-ներից: Խնդիրը կայանում է նրանում, որ մի քանի radio-ների համար կլինի նույն state-ը, բայց տարբեր value-ներ:

Ուստի աշխատանքը կատարվում է հետևյալ կերպ. Յուրաքանչյուր ռադիոկոճակի համար value ատրիբուտում գրվում է իր արժեքը, իսկ checked ատրիբուտում - հատուկ պայման, որը ստուգում է, արդյոք state-ը հավասար է տվյալ արժեքին: Եթե հավասար է - ռադիոկոճակը կնշվի, իսկ եթե ոչ - կմնա չնշված:

Ահա նկարագրվածի իրականացումը.

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 լեզուն, գովաբանեք օգտատիրոջը: