Переключатели — это общий элемент управления формой, используемый в веб-приложениях, позволяющий пользователям сделать один выбор из списка параметров. В этой статье мы рассмотрим различные методы создания переключателей в React, а также приведем примеры кода. Давайте погрузимся!

Метод 1: использование элементов HTML <input>
Один простой подход — использовать элемент HTML <input>с атрибутом type, установленным в значение “радио”. Вот пример:

import React, { useState } from 'react';
function RadioButtons() {
  const [selectedOption, setSelectedOption] = useState('');
  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };
  return (
    <div>
      <input
        type="radio"
        id="option1"
        name="radioGroup"
        value="option1"
        checked={selectedOption === 'option1'}
        onChange={handleOptionChange}
      />
      <label htmlFor="option1">Option 1</label>
      <input
        type="radio"
        id="option2"
        name="radioGroup"
        value="option2"
        checked={selectedOption === 'option2'}
        onChange={handleOptionChange}
      />
      <label htmlFor="option2">Option 2</label>
    </div>
  );
}

Метод 2: использование состояния и компонентов React.
Другой подход предполагает создание отдельного компонента переключателя, который управляет своим собственным состоянием. Вот пример:

import React, { useState } from 'react';
function RadioButton({ label, value, checked, onChange }) {
  return (
    <div>
      <input
        type="radio"
        id={value}
        name="radioGroup"
        value={value}
        checked={checked}
        onChange={onChange}
      />
      <label htmlFor={value}>{label}</label>
    </div>
  );
}
function RadioButtons() {
  const [selectedOption, setSelectedOption] = useState('');
  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };
  return (
    <div>
      <RadioButton
        label="Option 1"
        value="option1"
        checked={selectedOption === 'option1'}
        onChange={handleOptionChange}
      />
      <RadioButton
        label="Option 2"
        value="option2"
        checked={selectedOption === 'option2'}
        onChange={handleOptionChange}
      />
    </div>
  );
}

Метод 3: использование сторонней библиотеки (например, React-Bootstrap)
Если вы предпочитаете использовать готовые компоненты пользовательского интерфейса, вы можете использовать сторонние библиотеки, такие как React-Bootstrap. Вот пример использования компонента Radioиз React-Bootstrap:

import React, { useState } from 'react';
import { Radio } from 'react-bootstrap';
function RadioButtons() {
  const [selectedOption, setSelectedOption] = useState('');
  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };
  return (
    <div>
      <Radio
        name="radioGroup"
        value="option1"
        checked={selectedOption === 'option1'}
        onChange={handleOptionChange}
      >
        Option 1
      </Radio>
      <Radio
        name="radioGroup"
        value="option2"
        checked={selectedOption === 'option2'}
        onChange={handleOptionChange}
      >
        Option 2
      </Radio>
    </div>
  );
}

В этой статье мы рассмотрели три различных метода создания переключателей в React. Вы можете выбрать метод, который лучше всего соответствует требованиям вашего проекта и стилю кодирования. Независимо от того, предпочитаете ли вы использовать базовые элементы HTML, управлять состоянием компонентов или использовать сторонние библиотеки, React обеспечивает гибкость и простоту реализации создания переключателей в ваших приложениях.

Не забудьте учитывать аспекты доступности и удобства использования переключателей, такие как правильная маркировка и обработка действий пользователя. Приятного кодирования!