React Радиокнопка

Радиокнопки (radio button) обычно используются группами, где можно выбрать только одну опцию.

Все радиокнопки группы должны иметь одинаковое значение атрибута name, чтобы гарантировать правильную работу выбора.

Управление радиокнопками основано на сравнении значения выбранной кнопки с состоянием компонента.

Радиокнопка считается активной, если её значение совпадает с выбранным значением в состоянии компонента.

Пример

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


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

function MyForm() {
  const [selectedFruit, setSelectedFruit] = useState('banana'); // начальное значение

  const handleChange = (event) => {
    setSelectedFruit(event.target.value); // меняем состояние при смене выбора
  };

  const handleSubmit = (event) => {
    alert(`Ваш любимый фрукт: ${selectedFruit}`); // выводим выбранный фрукт
    event.preventDefault(); // предотвращаем стандартную отправку формы
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>Выберите ваш любимый фрукт:</p>
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="apple" 
          checked={selectedFruit === 'apple'} 
          onChange={handleChange} 
        /> Яблоко
      </label><br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="banana" 
          checked={selectedFruit === 'banana'} 
          onChange={handleChange} 
        /> Банан
      </label><br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="cherry" 
          checked={selectedFruit === 'cherry'} 
          onChange={handleChange} 
        /> Вишня
      </label><br />
      <button type="submit">Отправить</button>
    </form>
  );
}

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

Пояснение к примеру:

  1. Каждая кнопка имеет атрибут name='fruit', что позволяет группировать их и обеспечить возможность выбора только одного варианта.
  2. Атрибут checked активирует соответствующую кнопку, если её значение соответствует текущему значению состояния компонента.
  3. Обработчик события handleChange обновляет состояние компонента при переключении радиокнопок.
  4. При отправке формы отображается уведомление с названием выбранного фрукта.

Таким образом, радиокнопки управляются аналогичным образом, как и другие элементы ввода, и позволяют создавать простые и ясные интерфейсы выбора единственной опции.