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

checkbox සමඟ වැඩ කිරීම ද ක්‍රමයට සමාන අර්ථ දැක්වීමක් අනුගමනය කරයි, නමුත් value ගුණාංගය වෙනුවට අපි checked ගුණාංගය සඳහන් කරමු. මෙම ගුණාංගයට true ලබා දුන්නොත් - checkbox තෝරාගත් බව පෙන්වනු ඇත, සහ false ලබා දුන්නොත් - තෝරාගත් බව පෙන්වන්නේ නැත:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> තෝරාගත්
		<input type="checkbox" checked={false} /> තෝරාගත් නැත
	</div>;
}

සාමාන්‍යයෙන් checked ගුණාංගයට බූලියන් අගයක් අඩංගු state එකක් ලබා දේ:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} />
	</div>;
}

ආදාන ක්ෂේත්‍ර සමඟ වැඩ කිරීමේදී මෙන්, ගුණාංගයේ අගය අඛණ්ඩව checked සඳහන් කළහොත් - checkbox හි තත්ත්වය වෙනස් කළ නොහැක. නිවැරදිව ක්‍රියා කිරීම සඳහා, checkbox වෙනස් වීමේදී එහි state එක ප්‍රතිවිරුද්ධ අගයකට වෙනස් කරමු:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // state එක ආපසු හරවන්න
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

අපට සරල කළ හැකිය:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
	</div>;
}

ටර්නරි ඇපරේටරය භාවිතා කරමින්, checkbox හි තත්ත්වය ඡේදයක් තුළ ප්‍රදර්ශනය කරමු:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>තත්ත්වය: {checked ? 'තෝරාගත්' : 'තෝරාගත් නැත'}</p>
	</div>;
}

checkbox එකක්, බොත්තමක් සහ ඡේදයක් ලබා දී ඇත. බොත්තම ක්ලික් කිරීමේදී, checkbox තෝරාගෙන ඇත්නම්, ඡේදය තුළ පරිශීලකයාට සුබ පැතුම් පාඨය ප්‍රදර්ශනය කරන්න, තෝරාගෙන නැත්නම් - විවාහ පාඨය ප්‍රදර්ශනය කරන්න.

අවතල checkbox තුනක් භාවිතා කරමින්, පරිශීලකයාගෙන් ඔහු දන්නා භාෂා තෝරාගැනීමට ඉල්ලන්න: html, css සහ js. එක් එක් භාෂාව සඳහා තේරීම් ප්‍රතිඵලය වෙනම ඡේදවල ප්‍රදර්ශනය කරන්න.