Радиокнопки — это обычный элемент пользовательского интерфейса, предназначенный для легкого выбора. Мы знаем их. Мы взаимодействовали с ними. Но время от времени нам дают дизайн радиокнопки, который отличается от стандартного. Итак, чтобы воспроизвести дизайн, мы должны создать собственный переключатель.

Что такое радиокнопка?

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

Разница между переключателями и флажками

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

Радиокнопка по умолчанию

Вот как радиокнопка ReactJS выглядит по умолчанию.

Пользовательская радиокнопка

Мы воспользуемся небольшой хитростью, чтобы создать собственные переключатели, и этот подход действительно прост для понимания.
Учитывая, что доступные параметры ограничены, и мы не можем многого добиться с помощью стандартного CSS переключателя (UI), мы собираемся использовать CSS, чтобы скрыть это.

Здесь мы добавили класс radiobutton-input и использовали CSS для его стилизации.

Мы использовали visibility:hidden, а не display:none, потому что display:none приводит к исчезновению элемента из DOM и не позволяет нам использовать какие-либо свойства input:radio. visibility:hidden просто скрывает пользовательский интерфейс, позволяя нам продолжать использовать его свойства.

Добавление функции onChange

Функция onChange работает так же, как и для других типов ввода. Поскольку мы включили реквизит name в тег input, мы можем получить имя целевого ввода.

Если мы проверим браузер и нажмем на метку, мы увидим, что в консоли отображается слово «men», что показывает, что наша функция onChange работает, и мы получаем имя целевого элемента.

Обратите внимание, что если свойство checked истинно, функция onChange не будет работать, потому что переключатель уже установлен на selected.

Следующее, что нам нужно сделать, это создать собственный радиокружок, добавив пустой span внутри нашего компонента радиокнопки, а затем стилизовать его.

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

Стайлинг

Очень важно знать, как оформить нашу пользовательскую радиокнопку. Нам нужно стилизовать пользовательский круг радио, независимо от того, выбран он или нет.

Мы присвоили тегу span класс custom-radiobutton, чтобы мы могли его стилизовать.

Мы также хотим стилизовать нашу радиокнопку, когда она выбрана (проверена). Для этого мы добавляем псевдокласс «checked» к radiobutton-input, затем включаем тег span с помощью + (знак плюс). Однако вы можете использовать тег span или класс custom-radiobutton.

Теперь, когда мы закончили с кодом и стилем компонента, давайте проверим его.

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

import { useState } from "react";
import RadioButton from "./RadioButton";
import "./styles.css";

function App() {
  const [fruits, setFruits] = useState("Apple");

  const handleChange = (event) => {
    setFruits(event.target.value);
  };

  const isChecked = (value) => fruits === value;

  return (
    <div className="App">
      <h2>How to create reuseable custom radio button</h2>
      <div className="radiobutton-div">
        <RadioButton
          id="Apple"
          name="Apple"
          value="Apple"
          text="Apple"
          onChange={handleChange}
          checked={isChecked("Apple")}
        />
        <RadioButton
          id="Berries"
          name="Berries"
          value="Berries"
          text="Berries"
          onChange={handleChange}
          checked={isChecked("Berries")}
        />
        <RadioButton
          id="Kiwi"
          name="Kiwi"
          value="Kiwi"
          text="Kiwi"
          onChange={handleChange}
          checked={isChecked("Kiwi")}
        />
      </div>
      <p>
        You have selected the <strong>{fruits}</strong> fruit{" "}
      </p>
    </div>
  );
}

export default App;
  • Мы создали состояние для отслеживания фрукта (параметра), который выбирает пользователь, а также инициализировали его фруктом «яблоко», поэтому он выбран по умолчанию.
  • Мы создали обработчик onChange, который помогает обновить состояние до любой опции, выбранной пользователем.

Когда в следующий раз вы получите дизайн с другим переключателем, отличным от значения по умолчанию, просто перейдите к этому руководству, которое поможет вам. Надеюсь, вы реализуете это и примените по-своему.

Вы найдете репозиторий учебника здесь, в codesandbox.