Kufanya Kazi na Radio katika React

Kufanya kazi na radio radio inatofautiana kidogo, kwa mfano, kutoka kwa zile checkbox. Tatizo ni kwamba kwa radio nyingi zitakuwa na hali (state) moja, lakini value tofauti.

Kwa hivyo kazi hufanyika kama ifuatavyo: kila kitufe cha radio katika sifa value huandikwa thamani yake, na katika sifa checked - hali maalum, ambayo inakagua, kama hali (state) ni sawa na thamani fulani. Ikiwa ni sawa - kitufe cha radio kitachaguliwa, na ikiwa si sawa - hakitachaguliwa.

Hayo yanatekelezwa kama ifuatavyo:

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

Kuna 3 vitufe vya radio. Kuna aya. Fanya ili thamani ya kitufe cha radio kilichochaguliwa ionekane katika aya hii.

Kwa kutumia vitufe vya radio, muulize mtumiaji lugha yake ya programu anayopenda. Onyesha uchaguzi wake katika aya. Ikiwa lugha ya JavaScript imechaguliwa, mwombe mtumiaji pongezi.