React-da checkbox ilə işləmək

checkbox ilə işləmək də oxşar prinsipə əsaslanır, yalnız value atributu əvəzinə biz checked atributunu göstəririk. Əgər bu atributa true ötürülərsə - checkbox qeyd olunacaq, əgər false - qeyd olunmayacaq:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> qeyd olunub
		<input type="checkbox" checked={false} /> qeyd olunmayib
	</div>;
}

Adətən checked atributuna məntiqi dəyər saxlayan state ötürülür:

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

Inputlarla işdə olduğu kimi, əgər checked atributunun dəyəri sərt şəkildə təyin olunarsa - checkbox-in vəziyyətini dəyişmək mümkün olmayacaq. Düzgün işləməsi üçün dəyişiklik zamanı onun state-ni əks dəyərə dəyişəcəyik:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // state-i tərsinə çeviririk
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Sadələşdirə bilərik:

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

Gəlin checkbox-in vəziyyətini abzasa çıxaraq, üçlü operator istifadə edərək:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>vəziyyət: {checked ? 'qeyd olunub' : 'qeyd olunmayib'}</p>
	</div>;
}

Checkbox, düymə və abzas verilib. Düyməyə klikləndikdə, əgər checkbox qeyd olunubsa, abzasa istifadəçi ilə salamlaşma mətnini çıxarın, əgər qeyd olunmayıbsa - vida mətnini.

Üç checkbox vasitəsilə istifadəçidən bildiyi dilləri seçməsini istəyin: html, css və js. Hər bir dil üzrə seçim nəticəsini ayrı-ayrı abzaslarda çıxarın.