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

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

import React, { useState } from 'react';
import { Form } from 'react-bootstrap';
const RadioButtons = () => {
  const [selectedValue, setSelectedValue] = useState(null);
  const handleRadioChange = (event) => {
    setSelectedValue(event.target.value);
  };
  return (
    <Form>
      <Form.Check
        type="radio"
        label="Option 1"
        value="option1"
        checked={selectedValue === 'option1'}
        onChange={handleRadioChange}
      />
      <Form.Check
        type="radio"
        label="Option 2"
        value="option2"
        checked={selectedValue === 'option2'}
        onChange={handleRadioChange}
      />
      <Form.Check
        type="radio"
        label="Option 3"
        value="option3"
        checked={selectedValue === 'option3'}
        onChange={handleRadioChange}
      />
    </Form>
  );
};
export default RadioButtons;

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

import React, { useRef } from 'react';
import { Form } from 'react-bootstrap';
const RadioButtons = () => {
  const selectedValueRef = useRef(null);
  const handleRadioChange = () => {
    const selectedValue = selectedValueRef.current.value;
    console.log(selectedValue);
  };
  return (
    <Form>
      <Form.Check
        type="radio"
        label="Option 1"
        value="option1"
        ref={selectedValueRef}
        onChange={handleRadioChange}
      />
      <Form.Check
        type="radio"
        label="Option 2"
        value="option2"
        ref={selectedValueRef}
        onChange={handleRadioChange}
      />
      <Form.Check
        type="radio"
        label="Option 3"
        value="option3"
        ref={selectedValueRef}
        onChange={handleRadioChange}
      />
    </Form>
  );
};
export default RadioButtons;

Метод 3: использование формы React Hook
React Hook Form — это библиотека, которая упрощает проверку формы и управление ею. Вот пример его использования с переключателями React Bootstrap:

import React from 'react';
import { Form } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
const RadioButtons = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data.radioOption);
  };
  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Form.Check
        type="radio"
        label="Option 1"
        value="option1"
        {...register('radioOption')}
      />
      <Form.Check
        type="radio"
        label="Option 2"
        value="option2"
        {...register('radioOption')}
      />
      <Form.Check
        type="radio"
        label="Option 3"
        value="option3"
        {...register('radioOption')}
      />
      <button type="submit">Submit</button>
    </Form>
  );
};
export default RadioButtons;

В этой статье мы рассмотрели несколько методов реализации переключателей с одним выбором в React Bootstrap. Мы рассмотрели подход с контролируемыми компонентами, подход с неконтролируемыми компонентами с использованием ссылок и использование библиотеки React Hook Form. У каждого метода есть свои плюсы и минусы, поэтому выберите тот, который лучше всего соответствует требованиям вашего проекта. Понимая эти методы, вы сможете создавать интуитивно понятные и удобные интерфейсы, которые позволят пользователям делать точный выбор.