Флажки Framework7 не генерируют событие click на IOS или Android

Я использую флажки Framework7 в своем приложении React. У меня есть onClick, настроенный на моем <input type="checkbox">, который обновляет состояние моего приложения каждый раз, когда установлен флажок. Он отлично работает в настольных браузерах, но событие onClick не регистрируется на мобильных устройствах. Кто-нибудь сталкивался с этой проблемой с Framework7? См. пример кода ниже (ненужный код удален для краткости).

Мой вклад:

<label className="label-checkbox item-content">
  <input className="fileChkBoxes" type="checkbox" name="chkName" onClick={this.handleChange.bind(this)}/>
    <div className="item-media">
       <i className="icon icon-form-checkbox"></i>
    </div>
</label>

Моя функция onClick (упрощенная):

handleChange() {
    let filesChecked = [];
    let fileInput = document.getElementsByClassName('fileChkBoxes');
    for (let i = 0; fileInput[i]; ++i) {
        if (fileInput[i].checked) {
            filesChecked.push(fileInput[i].value);
        }
    }
    ProjectActions.batchDelete(filesChecked);
}

html-framework-7
person CaseyC    schedule 18.02.2016    source источник

Ответы (5)


arrow_upward
1
arrow_downward

По какой-то причине нажатие на ввод Framework7 [флажок] не срабатывает onChange в iOS/Android. Вместо этого установите onClick на метке и подождите, пока F7 изменит объект формы, прежде чем получать значения формы. На рабочем столе onClick работает с полем ввода, но следующие изменения в вашем коде заставят его работать с обоими. Вам нужно будет передать свой formId, который содержит флажки, и вы можете сделать это более общим, сделав имя группы флажков переменной.

HTML:

<label className="label-checkbox item-content" onClick={() => this.handleChange(formId, 'chkName')}>
  <input className="fileChkBoxes" type="checkbox" name="chkName"/>
    <div className="item-media">
       <i className="icon icon-form-checkbox"></i>
    </div>
</label>

JS (ES6):

handleChange(formId, checkBoxName) {
    setTimeout( () => {
        var form = new Framework7().formToJSON('#' + formId);                
        if (form && form[checkBoxName] != null) ProjectActions.batchDelete(form[checkBoxName]);
    }, 100);
}
person DaveB    schedule 18.02.2016
comment
Это кажется слишком сложным по сравнению с другим ответом о добавлении атрибута no-fastclick, который, кажется, решает проблему. Также здесь есть куча необъяснимого кода, такого как ProjectActions.batchDelete. Насколько это необходимо для решения задачи? - person uglycoyote; 13.05.2018

arrow_upward
6
arrow_downward

У меня была такая же проблема при использовании флажка с React. Событие onChange не срабатывало. Мне пришлось добавить класс «no-fastclick» к атрибуту метки, чтобы он работал.

<label htmlFor={htmlID} className="label-checkbox item-content no-fastclick">

Мне помогло решение здесь: http://forum.framework7.io/#!/getting-started:checkbox-not-binding-to-ng

person Dushyanth    schedule 15.10.2017
comment
Используя F7 в React, я снова столкнулся с этой проблемой, но в другом элементе. Я использовал Dropzone.js для загрузки файлов, и событие щелчка при вводе файла не работало. После нескольких разочаровывающих часов отладки я вспомнил этот пост. Я добавил no-fastclick, как было предложено, и все работает нормально. Это может быть лучший ответ. - person CaseyC; 28.10.2017

arrow_upward
1
arrow_downward

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

Решение angularJS может быть достигнуто путем добавления события onclick, которое останавливает распространение в обработчике фреймворка. Затем добавьте событие ng-click для переключения значения модели. Виола! Угловой охват отражает правильное значение, и флажок рамки тоже.

<label class="label-checkbox item-content" onclick="event.stopPropagation(); return false;" ng-click="models.tss[$index] = !models.tss[$index]">
     <input type="checkbox" ng-model="models.tss[$index]">
      <div class="item-media">
          <i class="icon icon-form-checkbox"></i>
      </div>
      <div class="item-inner">
          <div class="item-title">{{ key }}</div>
      </div>
</label>
person user2881275    schedule 28.03.2017
comment
Поскольку я изначально разместил этот вопрос, я обнаружил, что флажки F7 действуют очень непоследовательно в моем приложении React. Это заставляет меня подозревать, что это результат какого-то конфликта с некоторыми библиотеками. Из-за этого я отказался от использования флажков F7 в своих приложениях. - person CaseyC; 12.04.2017

arrow_upward
0
arrow_downward

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

person Vladimir Kharlampidi    schedule 22.02.2016
comment
Использование onChange на самом деле не решает проблему в этом случае. Событие onChange и onClick не запускается для флажков Framework7 в Android или IOS. Я пробовал оба без везения. Однако принятый ответ выше решил проблему для меня. Спасибо за отличный UI фреймворк Владимир. - person CaseyC; 23.02.2016
comment
Странно, проверил еще раз, у меня работает нормально. В любом случае, будьте осторожны с таймаутами, здесь на них трудно полагаться. - person Vladimir Kharlampidi; 24.02.2016
comment
изменение работает, но не является идеальным решением, поскольку пользователь не может выбрать то же значение, которое уже выбрано (поскольку событие изменения не срабатывает) - person Adrián E; 28.06.2017
comment
использование обработчика кликов в контейнере li флажка помогло мне, так как теперь я могу щелкнуть тот же параметр, который уже был выбран. - person Adrián E; 28.06.2017

arrow_upward
0
arrow_downward

Лучшее, что мне удалось сделать, это добавить обработчик кликов для контейнера li элемента радио и обработчик изменений для самого ввода.

Если выбрано другое радио из группы, изменение будет активировано, и если выбрано то же самое, сработает щелчок li. Будьте осторожны с двойным событием: одно для изменения и одно для клика. В моем случае это не было проблемой, так как щелчок только закрывал модальное окно.

person Adrián E    schedule 28.06.2017