Радио кнопки не проверяются при нажатии на ярлык - PullRequest
Новая
       6

Радио кнопки не проверяются при нажатии на ярлык

1 голос
/ 18 марта 2019

У меня есть группа из 3 переключателей в семантическом интерфейсе реагирования.

Это работает правильно. Проблема в баге пользовательского интерфейса, когда я нажимаю на одну из этих кнопок, кнопки не проверяются.

Снимок экрана с ошибкой пользовательского интерфейса:

enter image description here

Кто-то знает, почему кнопки не проверяются?

Код переключателей: 

  <Form>
    <Form.Field>
      <Radio
        label="New Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === false}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="Transferred Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === true}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="New Claims and Trasferred Claims"
        name="isTransferred"
        value={'all'}
        checked={isTransferred === 'all'}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
  </Form>

ОБНОВЛЕНО:

Сгенерированный HTML взят из браузера: 

<div class="row">
<form class="ui form" style="padding-left: 3.3em;">
    <div class="field">
        <label>Assignments:</label>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="false">
            <label>New Claims</label>
        </div>
    </div>
    <div class="field">
        <div class="ui checked radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="true">
            <label>Transferred Claims</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="all">
            <label>New Claims and Trasferred Claims</label>
        </div>
    </div>
</form>

Ответы [ 2 ]

3 голосов
/ 18 марта 2019

Метка должна иметь атрибут «for», чтобы элемент ввода реагировал на щелчок по его метке.

Значение атрибута "for" должно быть "id" элемента ввода.

Я считаю, что это должно работать, если вы добавите свойство "id" к элементу Radio.

Более подробную информацию можно найти здесь: HTML-элемент

0 голосов
/ 18 марта 2019

Попробуйте добавить checked = true вместо checked={isTransferred === false}, а также попробуйте вставить значение label внутри value

...