Переключатель Bulma Extensions: как заставить его переключаться - PullRequest
Новая
       9

Переключатель Bulma Extensions: как заставить его переключаться

0 голосов
/ 11 февраля 2020

Когда я пытаюсь использовать мой переключатель, такой как в демо , он не двигается.

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

Поскольку я загружаю их динамически, я генерирую свой идентификатор, имя и метку "for" с одинаковым значением, IE: isActive-n.

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

Вот часть переключателя моего компонента реакции: 

      <div className="column is-2">
          <div className="field is-pulled-right">
            <input
              id={`isActive-${props.id}`}
              type="checkbox"
              name={`isActive-${props.id}`}
              className="switch is-success is-rounded"
              checked={checked}
              onChange={swithOnChangeHandler}
            />
            <label htmlFor={`isActive-${props.id}`}>{label}</label>
          </div>
        </div>

Вот сгенерированный HTML: 

<div class="column is-2">
    <div class="field is-pulled-right">
        <input id="isActive-11" type="checkbox" name="isActive-11" class="switch is-success is-rounded is-small">
        <label for="isActive-11">Activate</label>
    </div>
</div>

1 Ответ

0 голосов
/ 14 февраля 2020

В результате возникла проблема с состоянием свойства проверенного ввода. Моя логика c для установки была неправильной. Я также начал использовать true и false для проверенного значения.

...