Чтобы проверить, установлен ли флажок в React:
- Создайте логическую переменную состояния для хранения значения флажка.
- Установите прослушиватель событий
onChange
для флажка ввода. - В прослушивателе используйте свойство
target.checked
объекта события, чтобы проверить, установлен ли флажок. - Сохраните значение
checked
в переменной состояния, чтобы иметь возможность проверить, установлен ли флажок вне прослушивателя событий.
App.js
import { useState } from 'react'; export default function App() { const [agreement, setAgreement] = useState(false); const handleChange = (event) => { setAgreement(event.target.checked); } return ( <div> <div id="app"> <input type="checkbox" name="agreement" onChange={handleChange} /> <label for="agreement"> I agree to the terms and conditions </label> <br /><br /> <button disabled={!agreement}>Continue</button> </div> </div> ); }
Свойство target
объекта события представляет элемент флажка input
; значение его свойства checked
указывает, установлен ли флажок или нет.
Объект события передается прослушивателю onChange
, который будет вызываться всякий раз, когда флажок установлен или снят.
Мы используем хук React useState
для сохранения отмеченного состояния флажка. useState
возвращает массив из двух значений; первая — это переменная, хранящая состояние, а вторая — функция, которая обновляет состояние при вызове.
Таким образом, каждый раз, когда флажок установлен или снят, переменная состояния agreement
будет автоматически переключаться на true
или false
.
Мы устанавливаем свойство disabled
кнопки на отрицание agreement
, чтобы отключить и включить его, когда agreement
равно true
и false
соответственно.
Проверьте, установлен ли флажок с помощью ref
Вместо того, чтобы контролировать отмеченное значение флажка с помощью состояния React, мы можем создать неуправляемый флажок и проверить, отмечен ли он с помощью ref.
Например:
App.js
import { useState, useRef } from 'react'; export default function App() { const [message, setMessage] = useState(''); const checkbox = useRef(); const handleClick = () => { if (checkbox.current.checked) { setMessage('You know JS'); } else { setMessage("You don't know JS"); } } return ( <div> <div id="app"> <input type="checkbox" name="js" ref={checkbox} /> <label for="js"> JavaScript </label> <br /> <button onClick={handleClick}>Done</button> <p>{message}</p> </div> </div > ); }
Данные в контролируемом вводе обрабатываются состоянием React, но для неконтролируемых вводов они обрабатываются самой DOM. Вот почему для флажка input
в приведенном выше примере не заданы реквизит value
или обработчик событий onChange
. Вместо этого мы проверяем, установлен ли флажок с помощью React ref. DOM обновляет проверенное значение, когда пользователь переключает флажок.
Мы создаем объект ref с хуком useRef
и назначаем его реквизиту ref
флажка input
. При этом для свойства current
объекта ref устанавливается объект DOM, представляющий флажок.
useRef
возвращает изменяемый объект, который сохраняет свое значение при обновлении компонента. Кроме того, изменение значения свойства current
этого объекта не приводит к повторному рендерингу. Это не похоже на возврат функции обновления setState
из хуков useState
.
Хотя документация React рекомендует использовать контролируемые компоненты, неконтролируемые компоненты имеют некоторые преимущества. Вы можете предпочесть их, если форма очень проста и не требует мгновенной проверки, а доступ к значениям требуется только при отправке формы.
Первоначально опубликовано на codingbeautydev.com
Все сумасшедшие вещи, которые делает JavaScript
Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.
Зарегистрируйтесь и немедленно получите бесплатную копию.