React Чекбокс

Для чекбоксов (checkbox) в React управление состоянием осуществляется с помощью атрибута checked, а не value, как в обычных полях ввода.

Далее мы будем использовать хук useState, чтобы управлять состоянием текстовой области.

В функции handleChange проверяем тип текущего элемента (e.target.type) и узнаём, является ли он чекбоксом или нет.

Пример

React использует атрибут checked для управления состоянием чекбокса:


import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [inputs, setInputs] = useState({}); // Начальное состояние

  const handleChange = (e) => {
    const target = e.target;
    // Проверяем, является ли элемент чекбоксом
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    setInputs(values => ({...values, [name]: value})) // Обновляем состояние
  };

  const handleSubmit = (event) => {
    let fillings = ''; // Состав бургера
    if (inputs.tomato) fillings += 'помидор'; // Проверяем, отмечен ли помидор
    if (inputs.onion) {
      if (inputs.tomato) fillings += ' и '; // Соединяем ингредиенты, если выбрано несколько
      fillings += 'лук';
    }
    if (fillings == '') fillings = 'ничего'; // Если ничего не выбрано
    alert(`${inputs.firstname} хочет бургер с ${fillings}`); // Сообщение с составом заказа
    event.preventDefault(); // Блокируем стандартную отправку формы
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Меня зовут:
        <input 
          type="text" 
          name="firstname" 
          value={inputs.firstname} 
          onChange={handleChange}
        />
      </label>

      <p>Я хочу бургер с:</p>
      <label>Помидором:
        <input 
          type="checkbox" 
          name="tomato" 
          checked={inputs.tomato} 
          onChange={handleChange}
        />
      </label>
      <label>Луком:
        <input 
          type="checkbox" 
          name="onion" 
          checked={inputs.onion} 
          onChange={handleChange}
        />
      </label>
      <button type="submit">Отправить заказ</button>
    </form>
  );
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Объяснение примера:

  1. Используем хук useState, чтобы хранить состояние формы (текстовое поле и чекбоксы).
  2. Функция handleChange проверяет тип текущего элемента и устанавливает соответствующее значение:
    • Если элемент — чекбокс, значение присваивается булево (true или false).
    • Иначе — обычное текстовое значение.
  3. Функционал отправки формы (handleSubmit) собирает состав ингредиентов, сравнивая состояние чекбоксов, и выводит сообщение с заказанным набором продуктов.

Определение начальных значений

Чтобы задать начальные значения для полей формы, дополним объект useState соответствующими ключами и значениями:

Пример

Задаём начальные значения для полей:


function MyForm() {
  const [inputs, setInputs] = useState({
    firstname: 'Иван', // начальное имя
    tomato: true, // помидор включен по умолчанию
    onion: false // лук выключен по умолчанию
  });

  ...