Checkboxse en voorwaardelijke weergawe in React
Kom ons maak dit so dat, afhangende van die merk van die checkbox, óf die een stukkie kode óf die ander op die skerm vertoon word. Laat ons voorwaardelijke weergawe hiervoor gebruik:
function App() {
const [checked, setChecked] = useState(true);
let message;
if (checked) {
message = <p>boodskap 1</p>;
} else {
message = <p>boodskap 2</p>;
}
return <div>
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
<div>{message}</div>
</div>;
}
Daar is 'n checkbox gegee. Gebruik die checkbox om die gebruiker te vra of hy/sy reeds 18 jaar oud is. As die checkbox gemerk is, wys die gebruiker die volgende blok kode:
<div>
<h2>Hoera, jy is al 18</h2>
<p>
hier is inhoud geplaas slegs vir volwassenes
</p>
</div>
En as die checkbox nie gemerk is nie - dan die volgende:
<div>
<p>
helaas, jy is nog nie 18 jaar oud nie:(
</p>
</div>
Daar is 'n checkbox en 'n paragraaf gegee. As die checkbox gemerk is, laat die paragraaf sigbaar op die skerm wees, en as dit nie gemerk is nie, versteek dit.
