Как я могу удалить имя_класса из других вложенных братьев и сестер после изменения входа радио в React?

Question

Я пытаюсь изменить цвет метки одного радиовхода. Цвет меняется. Однако, когда я нажимаю на другие радиокнопки, класс сохраняется. Я хочу, чтобы только один переключатель имел измененный класс. Вот мой код. До сих пор я устал выполнять цикл по нему и использовал classList Remove для удаления класса из других элементов метки. Все, что я пробовал, - это утверждение if, я пытался сравнить ярлык Element с другими.

Вот кодовый ящик, поэтому на него проще ответить https://codesandbox.io/s/naughty-curie-b8fd2?fontsize=14

function checkInput(e) {
    let labelElement = e.target.parentNode;
    let bgElement = labelElement.parentNode.parentNode;
    bgElement.classList.add('checked');
    if( labelElement !== labelElement ){
        var oldChecked = document.getElementsByClassName('checked');
        for (let i = 0; i < oldChecked.length; i++){
            oldChecked[i].classList.remove('checked');
        }
    }
}

class ServiceLevel extends Component {
    render(){
        return (
            <div>
                <Segment>
                    <Menu attached="top" borderless={true}>
                        <Menu.Item>
                            <Header>Scale:</Header>
                            <Label className="filter_check" size="large">
                                <Form.Radio
                                label="Year"
                                control="input"
                                type="radio"
                                name="period"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Radio
                                label="Quarter"
                                control="input"
                                type="radio"
                                name="period"
                                value="quarter"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Radio
                                label="Month"
                                control="input"
                                type="radio"
                                name="period"
                                value="month"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Field
                                label="Date"
                                control="input"
                                type="radio"
                                name="period"
                                value="date"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Field
                                label="Interval"
                                control="input"
                                type="radio"
                                name="period"
                                value="interval"
                                onChange={checkInput}
                            />
                            </Label>
                        </Menu.Item>
                    </Menu>
                </Segment>
            </div>
        )
    }
}
export default ServiceLevel;

Css даже в том случае, если вам, вероятно, нужен только JSX

.filter_check input {
    display: none;
  }

  div.ui.large.label.filter_check.checked {
    background-color: #00b5ad;
  }

Answer 1

Это плохая практика манипулировать классами через DOM API. Таким образом, вам нужно добавить состояние для вашего компонента, в котором вы будете хранить выбранное значение. Вот рабочий код:

https://codesandbox.io/embed/stackoverflow-one-inputchecked-bgcolored-m1w07

const periodFilters = [
  {label: "Year",value: "year"},
  {label: "Quarter", value: "quarter"},
  {label: "Month", value: "month"},
  {label: "Date", value: "date"},
  {label: "Interval", value: "interval"}
];

class ServiceLevel extends Component {
  constructor() {
    super();
    this.state = {
      value: null
    };
  }

  checkInput(value) {
    this.setState({
      value
    });
  }

  render() {
    return (
      <div>
        <Segment>
          <Menu attached="top" borderless={true}>
            <Menu.Item>
              <Header>Scale:</Header>
              {periodFilters.map(item => {
                const isChecked = item.value === this.state.value;
                return (
                  <Label
                    className={`filter_check ${isChecked ? "checked" : ""}`}
                    size="large"
                  >
                    <Form.Radio
                      label={item.label}
                      control="input"
                      type="radio"
                      name="period"
                      value={item.value}
                      onChange={() => this.checkInput(item.value)}
                    />
                  </Label>
                );
              })}
            </Menu.Item>
          </Menu>
        </Segment>
      </div>
    );
  }
}