javascript - 在 React 中更改 radio 输入后，如何从其他嵌套 sibling 中删除类名？

Question

我正在尝试更改单个 radio 输入的标签颜色。颜色在变化。但是，当我单击其他单选按钮时，该类仍然存在。我只想要一个单选按钮来更改类。这是我的代码。到目前为止，我已经厌倦了在它上面运行一个循环并使用 classList Remove 将类从其他标签元素中移除。我尝试过的所有内容都在 if 语句中，我试图将标签 Element 与其他元素进行比较。

这是一个codeSandbox，因此更容易回答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>
    );
  }
}