Чтобы проверить, установлен ли флажок в React:

  1. Создайте логическую переменную состояния для хранения значения флажка.
  2. Установите прослушиватель событий onChange для флажка ввода.
  3. В прослушивателе используйте свойство target.checked объекта события, чтобы проверить, установлен ли флажок.
  4. Сохраните значение 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.

Зарегистрируйтесь и немедленно получите бесплатную копию.