Как присвоить класс к выбранному input-radio в react-js?

Question

[Дарья]

Я создала несколько инпутов с вариантами ответа да/нет. Нужно сделать так, чтобы при выборе элемента цвет активного (выбранного) ответа изменялся (условно, становился зелёным). Вроде, получилось, но: если пользователь передумал и нажал нет после да - да продолжает быть зелёным, в то время как и нет становится зелёным, и если пользователь снова нажмет на да, то этот вариант ответа перестанет быть зелёным и так по кругу...
Я понимаю почему так работает (основываясь на моём коде), но не понимаю как исправить, помогите, пожалуйста

Вот мой код:
Radio.jsx - файл:

import { useState } from "react"

export default function Radio({ id, name, children }) {

  const [isActive, setIsActive] = useState(false);

  function SelectValue() {
    setIsActive(!isActive)
  }

  // если инпут активный, то к его лэйблу привязывается стиль

  return (
    <>
      <label
        className={isActive ? 'activeBox' : ''} 
        >
        <input 
          onChange={SelectValue}
          type='radio'
          id={id}
          name={name}
        />
        {children}
      </label>
    </>
  )
}

Form.jsx - файл:

import Radio from "./Radio";

export default function Form() {
return (
    <form className="form" action="url" method='post'>
      <div className="form__presence">
        <label>Подтвердите присутствие</label>
        <span>
          <Radio id="coming" name="presence">Я приду</Radio>
          <Radio id="notComing" name="presence">Я не приду</Radio>
        </span>
      </div>
      <div className="form__transport">
        <label>Нужен ли трансфер до места проведения?</label>
        <span>
          <Radio id="yes" name="transport">Да</Radio>
          <Radio id="no" name="transport">Нет</Radio>
        </span>  
      </div>
      <button type="submit">Отравить</button>
    </form>

Answer 1

[0xD34F]

Если выбор сводится к да/нет, то почему должны быть две радиокнопки, а не один чекбокс? Но окей, вам виднее.

Складываем в массивы описания радиокнопок:

const presence = [
  { value:    'coming', text:    'Приду' },
  { value: 'notComing', text: 'Не приду' },
];

const transport = [
  { value: 'yes', text:  'Да' },
  { value:  'no', text: 'Нет' },
];

Создаём стейт с данными формы и метод его обновления:

const [ formData, setFormData ] = useState({});
const onChange = ({ target: t }) =>
  setFormData(fd => ({
    ...fd,
    [t.name]: t.value,
  }));

Создаём компоненты радиокнопки и радиогруппы:

const Radio = ({ children, className, ...props }) =>
  <label className={className ?? ''}>
    <input type="radio" {...props} />
    {children}
  </label>;

const RadioGroup = ({ title, name, items, value, onChange }) =>
  <div className="radiogroup">
    <div className="radiogroup-title">{title}</div>
    {items.map(n => (
      <Radio
        key={n.value}
        className={`radiogroup-item ${value === n.value ? 'active' : ''}`}
        name={name}
        value={n.value}
        checked={value === n.value}
        onChange={onChange}
      >
        {n.text}
      </Radio>
    ))}
  </div>;

Создаём радиогруппы, используя массивы с описаниями радиокнопок:

<RadioGroup
  title="Подтвердите присутствие"
  name="presence"
  items={presence}
  value={formData.presence}
  onChange={onChange}
/>
<RadioGroup
  title="Нужен ли трансфер до места проведения?"
  name="transport"
  items={transport}
  value={formData.transport}
  onChange={onChange}
/>

Всё.

Comments

[Дарья]

Спасибо Вам большое!!