@dan_farrell
В React можно получить значение checkbox, используя обработчик событий onChange. Когда пользователь изменяет состояние checkbox, срабатывает функция onChange, которая обновляет состояние компонента.
Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import React, { useState } from 'react'; function App() { const [checked, setChecked] = useState(false); const handleCheckboxChange = (event) => { setChecked(event.target.checked); }; return ( <div> <input type="checkbox" checked={checked} onChange={handleCheckboxChange} /> <label>Checkbox</label> <p>{checked ? 'Checked' : 'Not checked'}</p> </div> ); } export default App; |
В этом примере мы создали компонент App, который содержит checkbox, метку и абзац, который отображает текущее состояние checkbox. Мы также создали состояние checked с помощью хука useState и функцию handleCheckboxChange, которая вызывается при изменении состояния checkbox.
В jsx для checkbox мы передали атрибуты checked и onChange. Атрибут checked устанавливает начальное состояние checkbox на false, а onChange указывает, какую функцию вызвать при изменении состояния. Когда пользователь кликает на checkbox, функция handleCheckboxChange вызывается и обновляет состояние checked в соответствии с новым состоянием checkbox.
В абзаце мы отображаем текущее состояние checkbox, используя тернарный оператор. Если checked равно true, мы отображаем "Checked", иначе - "Not checked".
@dan_farrell
В результате, при изменении состояния checkbox, значение будет сохранено в переменной checked
и будет отображаться на странице в соответствии с текущим состоянием checkbox.