Как работать с радиокнопками в React

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

Сначала создадим компонент для отображения радиокнопок, которые можно использовать для выбора размера пиццы:

function App() {
  return (
    <div className="App">
      <h3>Select Pizza Size</h3>

      <input type="radio" name="topping" value="Regular" id="regular" />
      <label htmlFor="regular">Regular</label>

      <input type="radio" name="topping" value="Medium" id="medium" />
      <label htmlFor="medium">Medium</label>

      <input type="radio" name="topping" value="Large" id="large" />
      <label htmlFor="large">Large</label>
    </div>
  )
}

export default App

Вход в полноэкранный режим Выход из полноэкранного режима

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

Мы можем передать checked как true, чтобы выбрать опцию по умолчанию. Давайте воспользуемся локальным состоянием для хранения выбранного значения.

import { useState } from "react"

function App() {
  const [topping, setTopping] = useState("Medium")

  return (
    <div className="App">
      <h3>Select Pizza Size</h3>

      <input
        type="radio"
        name="topping"
        value="Regular"
        id="regular"
        checked={topping === "Regular"}
      />
      <label htmlFor="regular">Regular</label>

      <input
        type="radio"
        name="topping"
        value="Medium"
        id="medium"
        checked={topping === "Medium"}
      />
      <label htmlFor="medium">Medium</label>

      <input
        type="radio"
        name="topping"
        value="Large"
        id="large"
        checked={topping === "Large"}
      />
      <label htmlFor="large">Large</label>
    </div>
  )
}

export default App

Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы инициализируем локальное состояние значением ‘Medium’, чтобы оно было выбрано по умолчанию.

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

import { useState } from "react"

function App() {
  const [topping, setTopping] = useState("Medium")

  const onOptionChange = e => {
    setTopping(e.target.value)
  }

  return (
    <div className="App">
      <h3>Select Pizza Size</h3>

      <input
        type="radio"
        name="topping"
        value="Regular"
        id="regular"
        checked={topping === "Regular"}
        onChange={onOptionChange}
      />
      <label htmlFor="regular">Regular</label>

      <input
        type="radio"
        name="topping"
        value="Medium"
        id="medium"
        checked={topping === "Medium"}
        onChange={onOptionChange}
      />
      <label htmlFor="medium">Medium</label>

      <input
        type="radio"
        name="topping"
        value="Large"
        id="large"
        checked={topping === "Large"}
        onChange={onOptionChange}
      />
      <label htmlFor="large">Large</label>

      <p>
        Select topping <strong>{topping}</strong>
      </p>
    </div>
  )
}

export default App

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, если вы выберете топпинг как ‘Large’, вы должны увидеть его, как показано ниже: