React'ta Radio ile Çalışma

Radio radio ile çalışmak, örneğin onay kutularına kıyasla biraz farklıdır. Sorun şu ki, birden fazla radio aynı state'e sahip olacak, ancak farklı value değerlerine sahip olacak.

Bu nedenle çalışma şu şekilde gerçekleşir: Her bir radio butonunun value özniteliğine kendi değeri yazılır ve checked özniteliğine - state'in belirli bir değere eşit olup olmadığını kontrol eden özel bir koşul. Eğer eşitse - radio butonu işaretlenmiş olacak, eşit değilse - işaretlenmemiş olacak.

Açıklananların uygulaması işte şöyle:

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 adet radio butonu verilmiştir. Bir paragraf verilmiştir. Seçilen radio butonunun değerinin bu paragrafa yazdırılmasını sağlayın.

Radio butonlarını kullanarak kullanıcıya en sevdiği programlama dilini sorun. Seçimini bir paragrafa yazdırın. Eğer JavaScript dili seçilmişse, kullanıcıyı övün.