在 React 中，有没有办法在选中的 Radio Input 上更改父标签标签的背景颜色？答案

【问题标题】：In React Is there a way to change the background color of a parent Label tag on a Radio Input checked?在 React 中，有没有办法在选中的 Radio Input 上更改父标签标签的背景颜色？
【发布时间】：2020-02-14 21:21:07
【问题描述】：

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

这是一个 CodeSandbox，在其实现第一个答案时加载了 React Semantic Ui 库，但它不起作用。 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;
}

“符合”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>

【问题讨论】：

你能发布你的 React 代码的“编译”HTML 吗？
添加了需要脚本的顺序吗？
恐怕你只是打错了：.label 而不是label。而!important 将不允许覆盖发生
我都试过了，因为<div class="ui large label filter_check">
哦，那么 + 应该是 ~，因为 label 先于 input

标签： javascript css reactjs semantic-ui semantic-ui-react

【解决方案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 元素。这不是微不足道的，需要修改父元素，我使用 <Form.Field> 的 onChange 属性进行了修改：

<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à!

【讨论】：