checkbox-თან მუშაობა React-ში

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 მონიშნულია, გამოიტანეთ აბზაცში mმომხმარებლის მისალმების ტექსტი, ხოლო თუ არაა მონიშნული - დამშვიდობების ტექსტი.

სამი checkbox-ის საშუალებით სთხოვეთ მომხმარებელს აირჩიოს ენები, რომლებიც იცის: html, css და js. შედეგს თითოეული ენისთვის გამოიტანეთ ცალკეულ აბზაცებში.