В реакции Есть ли способ изменить цвет фона родительского тега Label на проверенном радиовходе? - PullRequest
Новая
       36

В реакции Есть ли способ изменить цвет фона родительского тега Label на проверенном радиовходе?

4 голосов
/ 18 октября 2019

Я использую React Semantic UI. В css я пытаюсь изменить цвет фона родительской метки входа, поэтому при нажатии переключателя он меняет цвет. Я скрываю переключатель с дисплеем нет. Поскольку ярлык придает ей красивый вид кнопки. Вот мой код. В html я просто использовал тег ввода и изменил диапазон, но это должно быть сделано по-другому с библиотекой реагировать на семантический интерфейс. Я смог заставить его работать с input и span, как в моей 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>

1 Ответ

1 голос
/ 18 октября 2019

После просмотра SandBox я смог увидеть, что код React компилируется в следующий HTML-код: 

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

Тогда я решил, что вы хотите изменить элемент parent после нажатия поля input. Это не тривиально и требует изменения родительского элемента, что я и сделал, используя onChange prop <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à !

...