在React中，有没有一种方法可以更改选中的单选输入上父Label标签的背景颜色？

Question

我正在使用React Semantic UI。在css中，我试图更改输入的“父”标签的背景颜色，因此单击单选按钮时，它会更改颜色。我正在隐藏单选按钮，但不显示任何内容。由于标签给它一个不错的按钮外观。这是我的代码。在html中，我只使用了一个输入标签并更改了跨度，但必须使用react语义ui库以不同的方式完成。我能够像在html版本中那样使它与输入和跨度一起使用，但是在这种情况下，单击功能不起作用。

这里是一个带有React Semantic Ui库的CodeSandbox，它实现了第一个答案，但是不起作用。 https://codesandbox.io/s/kind-tereshkova-u9toz?fontsize=14

我添加了“已编译” html

<Segment>
    <Menu attached="top" borderless={true}>
        <Menu.Item>
            <Header>
                 Scale:
            </Header>
            <Label className="filter_check" size="large">
                 <Form.Field
                     label="Year"
                     control='input'
                     type='radio'
                     name='year'
                 />
            </Label>
        </Menu.Item>
    </Menu>
</Segment>

.filter_check input {
    display: none;
}
input:checked + .filter_check>.label {
    background: #00b5ad !important;
    width: 100% !important;
}

.field input[type=radio]:checked + label {
    background: red;
    color: #fff;
    margin-left: 1em;
    padding: .3em .78571429em;
}

“ complied” html

<div class="ui segment">
   <div class="ui borderless top attached menu">
      <div class="item">
         <div class="ui header">Scale:</div>
         <div class="ui large label filter_check">
            <div class="field"><label><input name="year" type="radio"> Year</label></div>
         </div>
      </div>
   </div>
</div>

Answer 1

查看了SandBox之后，我能够看到React代码编译为以下HTML：

<div class="ui large label filter_check">
  <div class="field">
  <label>
  <input name="year" type="radio"> Year
  </label>
  </div>
</div>

然后我想您想在单击input字段时修改parent元素。这并非易事，需要修改父元素，这是我使用onChange的<Form.Field>属性完成的：

<Label className="filter_check" size="large">
    <Form.Field
        label="Year"
        control="input"
        type="radio"
        name="year"
        onChange={checkInput}
    />
</Label>

使用以下功能，将checked类添加到修改后的元素：

function checkInput(e) {
    let labelElement = e.target.parentNode;
    let bgElement = labelElement.parentNode.parentNode;
    bgElement.classList.add('checked');
}

然后我们使用以下内容更新CSS：

div.ui.large.label.filter_check.checked {
    background-color: red;
}

和-Voilà！