在 React 中，有沒有辦法在選中的 Radio Input 上更改父 Label 標簽的背景顏色？

Question

我正在使用 React 語義 UI。 在 css 中，我試圖更改輸入的父 label 的背景顏色，因此當單擊單選按鈕時，它會更改 colors。 我正在隱藏單選按鈕，不顯示任何內容。 由於 label 給它一個漂亮的按鈕外觀。 這是我的代碼。 在 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>

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字段時修改父元素。 這不是微不足道的，需要修改父元素，我使用<Form.Field>的onChange屬性進行了修改：

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

使用以下 function，將checked的 class 添加到修改后的元素：

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;
}

而且 - 瞧！

Answer 2

此代碼按描述工作。
我已將+更改為~ ，因為input在 label 之前label

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

 <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"><input name="year" type="radio"><label>Year</label></div> </div> </div> </div> </div>