Работа с чекбоксами в React
Работа с checkbox
также осуществляется по схожему принципу,
только вместо атрибута value мы указываем
атрибут checked. Если в этот атрибут передать
true - то чекбокс будет отмечен, а если false
- не будет отмечен:
function App() {
return <div>
<input type="checkbox" checked={true} /> отмечен
<input type="checkbox" checked={false} /> не отмечен
</div>;
}
Обычно в атрибут checked передается стейт,
содержащий логическое значение:
function App() {
const [checked, setChecked] = useState(true);
return <div>
<input type="checkbox" checked={checked} />
</div>;
}
Так же, как и при работе с инпутами, если
жестко задать значение атрибута checked
- состояние чекбокса нельзя будет сменить.
Для корректной работы будем по изменению
чекбокса менять его стейт на противоположное
ему значение:
function App() {
const [checked, setChecked] = useState(true);
function handleChange() {
setChecked(!checked); // инвертируем стейт
}
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>;
}
Давайте выведем состояние чекбокса в абзац, используя тернарный оператор:
function App() {
const [checked, setChecked] = useState(true);
return <div>
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
<p>состояние: {checked ? 'отмечен' : 'не отмечен'}</p>
</div>;
}
Дан чекбокс, кнопка и абзац. По клику на кнопку, если чекбокс отмечен, выведите в абзац текст приветствия с пользователем, а если не отмечен - текст прощания.
С помощью трех чекбоксов попросите пользователя выбрать языки, которые он знает: html, css и js. Результат выбора по каждому языку выводите в отдельные абзацы.