React'ta Checkbox ile Çalışma

Checkbox ile çalışma benzer bir prensibe dayanır, sadece value özelliği yerine checked özelliğini kullanırız. Bu özelliğe true değeri verilirse - checkbox işaretlenmiş olur, eğer false değeri verilirse - işaretlenmemiş olur:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> işaretli
		<input type="checkbox" checked={false} /> işaretli değil
	</div>;
}

Genellikle checked özelliğine, mantıksal bir değer içeren state iletilir:

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

Tıpkı input'larla çalışırken olduğu gibi, eğer checked özelliğinin değeri sabit olarak ayarlanırsa - checkbox'ın durumu değiştirilemez. Doğru çalışması için, checkbox değiştiğinde state'ini mevcut değerinin tersine çevireceğiz:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // state'i tersine çevir
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Basitleştirebiliriz:

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

Checkbox'ın durumunu, üçlü operatör kullanarak bir paragrafa yazdıralım:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>durum: {checked ? 'işaretli' : 'işaretli değil'}</p>
	</div>;
}

Bir checkbox, bir buton ve bir paragraf verilmiştir. Butona tıklandığında, eğer checkbox işaretliyse, paragrafa kullanıcıya bir selamlama metni yazdırın, eğer işaretli değilse - bir veda metni yazdırın.

Üç checkbox kullanarak kullanıcıdan bildiği dilleri seçmesini isteyin: html, css ve js. Her bir dil için seçim sonucunu ayrı paragraflara yazdırın.