React හි radio සමඟ වැඩ කිරීම

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 භාෂාව තෝරාගෙන ඇත්නම්, පරිශීලකයාට පැසසුම් දක්වන්න.